Переадресация формы AJAX вместо обновления целевого

Question

Я знаю, что этот вопрос задан очень часто, и я попытался найти любое решение, которое я могу найти, но я до сих пор не могу получить форму Ajax для обновления DIV, а затем перенаправление на Action Action, например (Local ..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

Почему бы не попробовать Javascript с jquery, чтобы обновить div async? вместо использования элементов управления 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> 
     } 

метод контроллер в Home для добавления пользователя неполный просмотр

[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"); 
    }