1

私はこの質問が多く寄せられていることを知っており、見つけることができるすべての解決策を試しましたが、Ajax フォームを取得して DIV を更新するのではなく、アクション メソッド (例: 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>

ユーザー詳細コントローラー

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

_レイアウト

@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 は初めてなので、さらに情報が必要な場合はお問い合わせください:)

4

1 に答える 1

1

div async を更新するために jquery で Javascript を試してみませんか? 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);
            }
        });
    }

あなたの部分的な Add user View 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");
    }
于 2015-07-22T06:47:06.727 に答える