I am using Ajax Form in my page , I have couple of AJAX forms in the page one --(Customers.cshtml) , and the other comes as PARTIAL VIEW (_customers.cshtml). When I Submit the Partial View. This PARTIAL VIEW IS submitting multiple times**
I am using the following Ajax script in main page and also in Partial View
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"
My code follows like this :
Customers.cshtml replaces the div tag with id="customers"
---------------------------------------------------------------------
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
#if (false)
{ <script src="~/Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script> }
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Action1", "Controller1", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "customers" }))
{
#Html.AntiForgeryToken()
<input type="submit" class="t-button t-state-default"/>
}
<div id="customers"> </div>
<div id="Orders"></div>
<div id="customers> tag is replaced with a partial view which has another AJAX FORM
**_customers.cshtml replaces the div tag with id="orders"**
--------------------------------------------------------
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Action2", "Controller1", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Orders" }, new { id = "formupdate" }))
{
#Html.AntiForgeryToken()
<input type="submit" class="t-button t-state-default"/>
}
Now when I try to submit the **_customers.cshtml** , it is submitting more than once
<br/>
Controller
-----------------------------------------------
[HttpPost]
public ActionResult Action1()
{
return PartialView("_customers");
}
[HttpPost]
public ActionResult Action2()
{
return PartialView("_Shipping");
}
Use this java libraries:
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
Related
I have a PartialView, that contains grid. The grid has a list of files that can be deleted. After user deletes the file I return PartialView with new file list.
Issue:
The new screen contains ONLY the PartialView. The MenuItems and all other things on the page are NOT rendered.
Any help highly appreciated. Thank you...
MY code:
Sellers.cshtml
'ACSDemoWinAzureACS.Models.SellersModel
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<div id="gridContainer">
#Html.Partial("_AdminView", Model)
</div>
'
_AdminView.cshtml - The PartialView
#model ACSDemoWinAzureACS.Models.HomeModel
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<div id="gridMain">
#using (Html.BeginForm("Admin", "Home", new { enctype = "multipart/form-data" }))
{
foreach(var file in Model.files)
{
<tr>
<td> #file.FileName</td>
<td>#Ajax.ActionLink("Delete" , "Delete" , "Home",
new { id = file.FileName },
new AjaxOptions
{
UpdateTargetId="gridMain", // <-- DOM element ID to update
InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element
HttpMethod = "GET" // <-- HTTP method
})
</td>
</tr>
}
}
</div>
HOmeController.cs
public PartialViewResult Delete(string id)
{
_model.Delete(id);
_model.files = _model.GetFiles();
return PartialView("_AdminView",_model);
}
In my index view I have several Ajax.ActionLinks displayed as shown in the code below. I am trying to render a partial view into DIV section when one of those links is clicked. Right now, it is rendering the partial as its own page. What am I doing incorrectly?
View
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
...Other HTML
<article class="border c-two" style="background-image: url('/Content/images/Fancy.jpg')">
<div style="opacity: 0;" class="fdw-background">
<h4 style="color:#fff;">Fancy Schmancy</h4>
<p class="fdw-port">
#Ajax.ActionLink("Go Now", "GotoStore", "Simulation", new { id = 1 }, new AjaxOptions { UpdateTargetId = "Rest", InsertionMode = InsertionMode.InsertAfter, HttpMethod = "GET" })<span class="vg-icon">→</span>
</p>
</div>
</article>
...other HTML
<div id="Rest"></div>
Controller
public PartialViewResult GotoStore(int id)
{
Store store = db.Stores.Find(id);
return PartialView(store);
}
I was able to get it working. The problem was where I added in the script source.
This:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Needs to be placed inside your layout file towards the bottom like this:
#Scripts.Render("~/bundles/jquery")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#RenderSection("scripts", required: false)
To edit a record, I'm opening a modal Kendo UI window populated with a partial view containing an AJAX enabled form:
#model MVC_ACME_Hardware.Models.BaseModel
<script type="text/javascript">
$(function () {
$("form").kendoValidator();
});
</script>
#using (Ajax.BeginForm("EditProduct", new AjaxOptions { UpdateTargetId = "ProductDiv", OnSuccess = "SomeMethod" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeFTE</legend>
#Html.HiddenFor(model => model.Products.Product_ID)
<div class="editor-label">
#Html.LabelFor(model => model.Products.Product_Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Products.Product_Name)
#Html.ValidationMessageFor(model => model.Products.Product_Name)
</div>
<input type="submit" value="Save" class="myButton" />
</fieldset>
}
When I run the form and click 'Save' on the popup, the form posts successfully but the post is not done via AJAX and my 'SomeMethod' onsuccess method is not being called. I've tried adding...
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
...on the partial view but it did not help. How can I get my form to submit using AJAX? I'm missing something obvious. Thanks!
try something like this (attention to the input type):
<input type="button" value="Save" class="myButton" id="btnSave" />
and the in the $(document).ready() :
var validator = $(document.forms[0]).kendoValidator().data("kendoValidator");
$("#btnSave").click(function(e) {
if (validator.validate()) {
var formContent = $(document.forms[0]).serialize();
var url = $(document.forms[0]).action;
$.post(url, formContent).done(function(data) {
$(document.body).append("<div class='savedRecordMessage'>success</div>");
});
}
});
I think you need to add these files if you want to use unobtrusive validation of MVC and Ajax options of AJAX form.
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
I am trying to use Ajax.Actionlink to render a partial view. But it only redirects me to the partial view. I also added: <add key="UnobtrusiveJavaScriptEnabled" value="true" /> to webconfig. Anyone?
My layout.cshtml Scripts.render and script is in head tag. Ajax.actionlink and div is in body
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jqueries")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#Ajax.ActionLink("Ajax Click", "Document","Home", new AjaxOptions { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace })
<div id="result">
</div>
Home controller:
public PartialViewResult Document()
{
return PartialView("Document", om);
}
My Document.cshtml
#model mymodel
#foreach (var item in Model)
{
<li>#Html.ActionLink(item.something, "Controller", "Action")</li>
}
Your jquery and unobtrusive-ajax should be at the bottom of the page, like this
</footer>
#Scripts.Render("~/bundles/jquery")
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Information why can be found here
http://developer.yahoo.com/performance/rules.html/
Placing this at the wrong place, WILL result in errors
I have a simple application on mvc3 with razor before i Open the dialog I tried to open an "alert" and it works correctly so function its working on the event but when i comment this alert and
try to open the dialog it just does not work
#model MvcApplication1.Models.LogOnModel
#{
ViewBag.Title = "Create";
}
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#contactForm').submit(function (e) {
//alert("entro a funcion");
e.preventDefault();
$('#dialog').dialog('open');
});
});
</script>
#using (Html.BeginForm("Index", "Infracciones", FormMethod.Post, new { id = "contactForm"}))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Infraccion</legend>
</fieldset>
<p>
<input value="Guardar" type="submit" name = "button"/>
</p>
}
You only need to add this:
<div id="dialog">
In the body.
try:
$('#dialog').dialog();
instead of
$('#dialog').dialog('open');