AJAX表單重定向而不是更新目標

Question

我知道這個問題已經被問了很多，我已經嘗試了我可以找到的每個解決方案，但我仍然無法讓我的Ajax表單更新DIV而不是重定向到Action方法，例如（本地..Home/Index_AddUser）。我已經縮短了代碼，因爲它是很長，否則：

查看

@using (Ajax.BeginForm("Index_AddUser", new AjaxOptions{UpdateTargetId = "userList"})) 
    { 
     @Html.AntiForgeryToken() 
     //This summarises user input and displays error messages 
     @Html.ValidationSummary() 

     <div id="aParent"> 

      <div align="justify"> 
       <div>@Html.LabelFor(model => model.UserLogin)</div> 
       <div>@Html.EditorFor(model => model.UserLogin, new { id = "UserLogin" })</div> 
      </div> 
      //Same as above repeated with different values 
      <div> 
       <div><input type="submit" value="Add User" id="UserCreate" /></div> 
      </div> 
     </div> 
    } 

<div id="userList"> 
    @{Html.RenderAction("UserListControl");} 
</div> 

管窺

@model IEnumerable<WebApplication1.Models.UserDetail> 
      <table> 
      <!-- Render the table headers. --> 
      <thead> 
       <tr> 
        //Table Headers matching LabelFor in VIew 
       </tr> 
      </thead> 
       <tbody> 
        @foreach (var item in Model) 
        { 
         <tr> 
          //Table Rows from db 
         </tr> 
        } 
       </tbody> 
     </table> 

UserDetailsController

[HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Index_AddUser([Bind(Prefix = "NewUserDetails")]UserDetail model) 
    { 
     Manager manager = new Manager(); 
      if (model != null) 
      { 
       manager.SaveUser(model.UserID, model.UserLogin, model.FirstName, model.Surname, model.Email, model.Active); 
       return PartialView("UserListControl"); 
      } 
      return PartialView("UserListControl"); 
     } 

_layout

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false) 

的Web.config

<appSettings> 
    <add key="webpages:Version" value="3.0.0.0"/> 
    <add key="webpages:Enabled" value="false"/> 
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
    </appSettings> 

BundleConfig

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
         "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.unobtrusive*", 
         "~/Scripts/jquery.validate*")); 

在此先感謝和我新的堆棧和MVC所以如果你需要任何更多信息請查詢:)

Answer 1

爲什麼不用jquery嘗試Javascript來更新div異步？而不是使用mvc控件？

在我看來，我會顯示用戶使用查看並使用局部視圖來添加新用戶。

這意味着你的看法Users

<input type="button" id="addUser" onclick="newUser()" value="Add User"/> 
<div id="NewUserDiv"></div> 
@model IEnumerable<WebApplication1.Models.UserDetail> 
     <table> 
     <!-- Render the table headers. --> 
     <thead> 
      <tr> 
       //Table Headers matching LabelFor in VIew 
      </tr> 
     </thead> 
      <tbody> 
       @foreach (var item in Model) 
       { 
        <tr> 
         //Table Rows from db 
        </tr> 
       } 
      </tbody> 
    </table> 

你這個頁面的JavaScript

 function newUser() { 
     $.ajax({ 
      url: '/Home/CreateUser', 
      success: function (data) { 
       $('#NewUserDiv').html(data); 
      } 
     }); 
    } 

你的部分添加用戶查看CREATEUSER

@using (Html.BeginForm("CreateUser", "Home", FormMethod.Post, new { encType = "multipart/form-data", name = "NewEmployeeForm", @class = "form-group" })) 
     { 
      @Html.AntiForgeryToken() 
    //This summarises user input and displays error messages 
    @Html.ValidationSummary() 

    <div id="aParent"> 

     <div align="justify"> 
      <div>@Html.LabelFor(model => model.UserLogin)</div> 
      <div>@Html.EditorFor(model => model.UserLogin, new { id = "UserLogin" })</div> 
     </div> 
     //Same as above repeated with different values 
     <div> 
      <div><input type="submit" value="Add User" id="UserCreate" /></div> 
     </div> 
    </div> 
     } 

控制方法在首頁爲您添加用戶部分查看

[HttpGet] 
    public ActionResult CreateUser() 
    { 
     var user = new UserDetail(); 
     return PartialView("CreateUser", user); 
    } 

    [HttpPost] 
    public ActionResult CreateUser(UserDetail model) 
    { 
    Manager manager = new Manager(); 
     if (model != null) 
     { 
      manager.SaveUser(model.UserID, model.UserLogin, model.FirstName, model.Surname, model.Email, model.Active); 
     } 
     return RedirectToAction("Home", "Users"); 
    }