ASP.NET MVC4 AJAX.BeginForm AjaxOptions OnSuccess не вызван

Question

Я пытаюсь использовать JQuery Model Dialog в MVC4, используя диалоговое окно Razor, показывающее штраф, но функция javascript AjaxOptions.OnSuccess не вызывается после нажатия кнопки обновления, но она перенаправляется на http: // <>: 3738/Cars/Edit/1? Length = 4 Я не знаю, почему это произошло.

Вот мой код

CarController.cs

public class CarsController : Controller 
{ 
    private ExpDb db = new ExpDb(); 

    // 
    // GET: /Cars/ 

    public ActionResult Index() 
    { 
     return View(db.Cars.ToList()); 
    } 



    // 
    // GET: /Cars/Edit/5 

    public ActionResult Edit(int id = 0) 
    { 
     CarModel carmodel = db.Cars.Find(id); 
     if (carmodel == null) 
     { 
      return HttpNotFound(); 
     } 
     return PartialView(carmodel); 
    } 

    // 
    // POST: /Cars/Edit/5 

    [HttpPost] 
    public JsonResult Edit(CarModel carmodel) 
    { 
     if (ModelState.IsValid) 
     { 

      db.Entry(carmodel).State = EntityState.Modified; 
      db.SaveChanges(); 
      //return RedirectToAction("Index"); 
      return Json(JsonResponseFactory.SuccessResponse(carmodel),JsonRequestBehavior.DenyGet); 
     } 
     else { 
      return Json(JsonResponseFactory.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet); 
     } 
    } 

Index.cshtml

@model IEnumerable<AjaxSamples.Models.CarModel> 

@{ 
ViewBag.Title = "Index"; 
} 
<div id="commonMessage"></div> 
<p> 
@Html.ActionLink("Create New", "Create") 
</p> 
<table> 
<tr> 
    <th> 
     @Html.DisplayNameFor(model => model.ImageFileName) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Name) 
    </th> 
    <th> 
     @Html.DisplayNameFor(model => model.Description) 
    </th> 
    <th></th> 
</tr> 

@foreach (var item in Model) { 
<tr> 
    <td> 
     @Html.DisplayFor(modelItem => item.ImageFileName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Name) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.Description) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editLink" }) | 
     @Html.ActionLink("Details", "Details", new { id=item.Id }) | 
     @Html.ActionLink("Delete", "Delete", new { id=item.Id }) 

     <button id="opener">Open Dialog</button> 
    </td> 
    </tr> 



} 

</table> 

<div id="updateDialog" title="Update Car"></div> 
<script type="text/javascript"> 
var linkObj; 
$(function() { 
    $(".editLink").button(); 

    $('#updateDialog').dialog({ 
     autoOpen: false, 
     width: 400, 
     resizable: false, 
     modal: true, 
     buttons: { 
      "Update": function() { 
       $("#update-message").html(''); //make sure there is nothing on the message before we continue       
       $("#updateCarForm").submit(); 
      }, 
      "Cancel": function() { 
       alert('sd'); 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(".editLink").click(function() { 
     //change the title of the dialog 
     linkObj = $(this); 
     var dialogDiv = $('#updateDialog'); 
     var viewUrl = linkObj.attr('href'); 
     $.get(viewUrl, function (data) { 
      alert(data); 
      dialogDiv.html(data); 
      //validation 
      var $form = $("#updateCarForm"); 
      // Unbind existing validation 
      $form.unbind(); 
      $form.data("validator", null); 
      // Check document for changes 
      $.validator.unobtrusive.parse(document); 
      // Re add validation with changes 
      $form.validate($form.data("unobtrusiveValidation").options); 
      //open dialog 
      dialogDiv.dialog('open'); 
     }); 
     return false; 
    }); 

}); 
function err(data) { 
    alert(data); 
} 


function updateSuccess(data) { 
    alert(data); 
} 

Edit.cshtml

@model AjaxSamples.Models.CarModel 

@{ 
ViewBag.Title = "Edit"; 
} 

@using (Ajax.BeginForm("Edit", "Cars", new AjaxOptions 
    { 
     InsertionMode = InsertionMode.Replace, 
     HttpMethod = "POST", 
     OnSuccess = "updateSuccess" 
    }, new { @id = "updateCarForm" })) 
{ 
@Html.ValidationSummary(true) 
<div id="update-message" class="error invisible"></div> 
<fieldset> 
    <legend>CarModel</legend> 

    @Html.HiddenFor(model => model.Id) 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.ImageFileName) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.ImageFileName) 
     @Html.ValidationMessageFor(model => model.ImageFileName) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Name) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Name) 
     @Html.ValidationMessageFor(model => model.Name) 
    </div> 

    <div class="editor-label"> 
     @Html.LabelFor(model => model.Description) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Description) 
     @Html.ValidationMessageFor(model => model.Description) 
    </div> 

    <p> 
     <input type="submit" value="Save" /> 
    </p> 
</fieldset> 
} 

<div> 
@Html.ActionLink("Back to List", "Index") 
</div> 

Answer 1

Вы можете использовать Post метод непосредственно внутри тега сценария для вызова метода контроллера, как:

@using (Html.BeginForm("Edit", "Cars", FormMethod.Post, new { id = "updateCarForm" })) 
{ 
    .......Yourdata...... 
} 

, а затем в Jquery

function PostForm(url) { 
    $("#updateCarForm").valid(); 
    if ($("#updateCarForm").valid()) { 
    $.post(url, $("#updateCarForm").serialize(), function (data) { updateSuccess(data); }); 
    } 
} 

Answer 2

Вам нужно добавить еще один параметр в вашем BeginForm вызова :

Ajax.BeginForm("Edit","Cars", null, new AjaxOptions 
       { 
        InsertionMode = InsertionMode.Replace, 
        HttpMethod = "POST", 
        OnSuccess = "updateSuccess" 
       }, new { @id = ""updateCarForm }) 

null для RouteValueDictionary. Here - все перегружают метод Ajax.BeginForm.

Answer 3

Существует ошибка синтаксиса в @ коде Алекса, это должно работать:

Ajax.BeginForm("Edit","Cars", null, new AjaxOptions 
      { 
       InsertionMode = InsertionMode.Replace, 
       HttpMethod = "Post", 
       OnSuccess = "updateSuccess" 
      }, new { id = "updateCarForm" }) 
{ /* Razor code */ } 

В частности, вы должны смотреть на this перегрузки Ajax.BeginForm().

Answer 4

У меня была та же проблема. Первоначально у меня был мой сценарий в разделе главы частичного обзора ... Это вызывало мои проблемы.

Я переместил его в заголовок, в котором размещался мой частичный вид, и все отлично работало. Мое представление - это загрузочная страница, размещенная в приложении mvc с макетом, установленным на: «Макет = ничего». Если действие контроллера загружается вид, безусловно, есть проблема с jquery.unobtrusive-ajax.js местом ...

Answer 5

Ниже требуется Jquery Файл

jquery.unobtrusive-Аякс .js

Answer 6

Try:

@using (Ajax.BeginForm ("Edit", новые {контроллер = "Автомобили"}, новые AjaxOptions

Answer 7

Проблема, с которой я столкнулась, заключается в том, что я объявлял функцию успеха внутри $ (document) .ready(). Я переехал на улицу, и это сработало.

i.e.:

@using (Ajax.BeginForm("DialogTest", "Main", new AjaxOptions { HttpMethod = "Post", OnSuccess = "ajaxSuccess" })) 
{ 
    <input type="button" id="info" value="Info" /> 
    <input type="button" id="confirm" value="Confirm" /> 
    <input type="button" id="wait" value="Wait" /> 
    <input type="button" id="ask" value="Ask" /> 
    <br /><br /> 
    <input type="submit" value="Submit" /> 
} 



@section Scripts 
{ 
    <script type="text/javascript"> 

     var ajaxSuccess = function() { 
      alert('this is ajaxSuccess'); 
     } 


     $(document).ready(function() { 
      // do not declare ajaxSuccess here 

      $('#mainForm').submit(function() { 
       radarApp.InfoDialog("form submitted."); 
       return false; 
      }); 

// snip