2013-10-09 71 views
8

我想在MVC4中使用Jquery模型對話框使用Razor對話框顯示罰款,但AjaxOptions.OnSuccess的JavaScript函數沒有調用後,我點擊更新按鈕,但它被重定向到http:// <>:3738/Cars/Edit/1?長度= 4我不知道爲什麼發生了。ASP.NET MVC4 AJAX.BeginForm AjaxOptions OnSuccess不叫

這裏是我的代碼

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> 
+2

您是否在jquery.js之後向您的頁面添加了jquery.unobtrusive-ajax.js? – Alex

+0

是的,我做了_Layout.cshtml – ravikumar

+1

你知道問題是什麼嗎?我在自己的應用程序中遇到同樣的問題。 –

回答

0

您可以直接使用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); }); 
    } 
} 
+0

感謝您的快速回復。但當前代碼中的實際問題是什麼。 – ravikumar

+0

爲什麼要將OP的'Ajax.BeginForm()'改爲'Html.BeginForm()'? – rexcfnghk

+0

在我的建議中,我沒有使用Ajax,我建議他使用Post方法的另一個解決方案,因爲我在那裏放置了'Html.BeginForm()'。 –

1

您需要在您的BeginForm調用添加一個參數:

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

null用於RouteValueDictionary。 Here都是Ajax.BeginForm方法的重載。

+0

感謝您的回覆。我更換了代碼,但仍然是相同的問題 – ravikumar

+0

在這裏我已經上傳了我的完整源代碼[鏈接] http://rvmicro.com/Ajaxsamples.rar – ravikumar

0

有一個在@亞歷克斯的代碼,這應該是工作語法錯誤:

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

具體來說,你應該尋找this超載Ajax.BeginForm()

+0

仍然沒有在這裏工作我已經上傳完整的源代碼到你[鏈接] http://rvmicro.com/Ajaxsamples.rar – ravikumar

+0

@ravikumar什麼不工作?有拋出異常嗎?腳本錯誤?使用Google Chrome或Fiddler提供的調試工具提供更多詳細信息。 – rexcfnghk

+0

沒有異常被拋出。它只是重定向到http:// localhost:3738/Cars/Edit/1?Length = 4並給出了json數據。 – ravikumar

1

我有同樣的問題。最初,我在部分視圖的頭部有我的腳本......這是我的問題。

我將它移動到視圖中的主持人我的局部視圖和一切工作正常。我的視圖是在mvc應用程序中託管的引導頁面,其佈局設置爲:「Layout = Nothing」。如果你的控制器動作加載一個觀點,肯定是與jquery.unobtrusive-ajax.js位置的問題...

15

以下是必需的jQuery的文件

jquery.unobtrusive阿賈克斯的.js

+2

這對我有用。它默認不包含在mvc5模板中。 – decompiled

+2

謝謝。你節省了我的時間 –

+1

我花了幾個小時試圖讓Ajax.BeginForm工作。你的帖子解決了我的問題。 – Baxter

1

嘗試:

@using(Ajax.BeginForm( 「編輯」,新{控制器= 「汽車」},新AjaxOptions

11

我遇到的問題是我在$(document).ready()中聲明瞭成功函數。我把它移到外面,它工作。

即:

@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 
+0

謝謝。拯救生命! –

相關問題