jquery - 如何将模态提交到 Controller 并在编辑模态对话框关闭后刷新ajax

Question

这是我的场景:

我正在使用 uikit 在主页中显示一个对话框，如下所示:

<div id="modalEdit" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-slide">
        <a href="" class="uk-modal-close uk-close"></a>
    </div>
</div>

当用户点击此按钮时，它会显示员工列表。

<div class="category">
            <span><a class="mainLink" data-url="@Url.Action("Index","Employee",  new {Area="Application"})" href="javascript:void(0);">Employee</a> </span>

            <div class="subCategory">

                <a href="#modalEdit" data-uk-modal onclick="editEmployee()"></a>
            </div>
            <a class="expand"><img src="~/Images/down-arrow.png" /></a>
</div>

<script>
$('.mainLink').click(function() {
        var a = $(this);

        var link = a.attr('data-url');

        if (link.length > 0)
            {

        $.ajax({
            url: link,

            success: function(data) {
                $('#output').html(data);
            },

            error: function(data) {
                $('#output').html("<h2> No results found</h2>");
            }
        });
        }
    });
</script>

这是我用于编辑模式的 cshtml 文件。

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>EmployeeViewModel</legend>

        @Html.HiddenFor(model => model.EmployeeId, new {id="employeeId"})

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.FirstName, new {id="employeeFirstName"})
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.MiddleName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.MiddleName, new {id="employeeMiddleName"})
            @Html.ValidationMessageFor(model => model.MiddleName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.LastName, new {id="employeeLastName"})
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <p>
            <input type="submit" data-url="@Url.Action("Edit", "Employee", new { Area = "Application" })" value="Save"/>
        </p>
    </fieldset>
}

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

<script>
    $('form').submit(function() {
        var $form = $(this);
        //alert($('#employeeId').val());
        $.ajax({
            type: "Post",
            url: $form.attr('data-url'),
            data: {
                EmployeeId: $('#employeeId').val(),
                FirstName: $('#employeeFirstName').val(),
                MiddleName: $('#employeeMiddleName').val(),
                LastName: $('#employeeLastName').val()
            },
            success: function (data) {
                $('#modalEdit').hide('slow');
                loadEmployee();
                //alert(data);
            },
            error: function(data) {
                alert("failed " + data);
            }
        });

        return false;
    });

    function loadEmployee() {
        //alert("hi");
        $.ajax({
            url: 'Application/Employee/Index',

            success: function (data) {
                //alert(data);
                $('#output').html(data);
            }
        });

    }
</script>

当用户在模态对话框中编辑时，数据应发送到 Controller :

//
// GET: /Application/Employee/Edit/5

public ActionResult Edit(int id = 0)
{
    EmployeeVm employeeviewmodel =new EmployeeVm(id);
    if (employeeviewmodel.EmployeeId<1)
    {
        return HttpNotFound();
    }
    return View(employeeviewmodel);
}

//
// POST: /Application/Employee/Edit/5

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(EmployeeVm employeeviewmodel)
{
    if (ModelState.IsValid)
    {
        EmployeeEditVm employee=new EmployeeEditVm(employeeviewmodel);
        return RedirectToAction("Index");
    }
    return View(employeeviewmodel);
}

然后，模式对话框应关闭并更新主页员工数据。

我的 View 模式:

public class EmployeeVm : ConventionInjection
    {
        private StringBuilder stringBuilder;

        public EmployeeVm(Employee employee)
        {
            this.InjectFrom<Employee>(employee);
        }

        public EmployeeVm(int id)
            : this(new Context().Employees.Find(id))
        {

        }

        public EmployeeVm()
        {

        }

        public int EmployeeId { get; set; }

        [Display(Name = "First Name")]
        [Required(ErrorMessage = "Pleae enter First Name"), StringLength(50)]
        public string FirstName { get; set; }

        [Display(Name = "Middle Name"), StringLength(50)]
        public string MiddleName { get; set; }

        [Display(Name = "Last Name"), StringLength(50)]
        [Required(ErrorMessage = "Please enter Last Name")]
        public string LastName { get; set; }

        public string FullName()
        {
            stringBuilder = new StringBuilder();
            stringBuilder.Append("<b>");
            stringBuilder.Append(LastName.ToUpper());
            stringBuilder.Append("</b>");
            if (!string.IsNullOrEmpty(MiddleName))
            {
                stringBuilder.Append(", ");
                stringBuilder.Append(MiddleName);
            }
            stringBuilder.Append(", ");
            stringBuilder.Append(FirstName);
            return stringBuilder.ToString();
        } 

        protected override bool Match(ConventionInfo c)
        {

            bool isMatch=((c.SourceProp.Name == "EmployeeId" && c.TargetProp.Name == "PersonId") ||
                    (c.SourceProp.Name == c.TargetProp.Name && c.SourceProp.Type==c.TargetProp.Type));
            return isMatch;
        }
    }

虽然，我已经显示了整个 cshtml 页面用于编辑、homw 页面和 View 模式，但它只是 jquery/ajax 没有按预期工作。所有其他代码都经过测试并且工作正常。

这是我的问题:那么，如何将数据传递到 Controller 并在模式对话框关闭后刷新员工列表？

提前感谢所有观众以及对我的帮助。

Answer 1

stringify 只是将其转换为 json，不会将其转换为模型。由于您的 ajax 调用已

EmployeeId: $('#employeeId').val(),
FirstName: $('#employeeFirstName').val(),
MiddleName: $('#employeeMiddleName').val(),
LastName: $('#employeeLastName').val()

您需要将 Controller 更改为

public ActionResult Edit(int EmployeeId, string FirstName, string MiddleName, string LastName){
    //do something with the data
}

如果你想将对象传递回 Controller ，你需要执行类似的操作

var employeeviewmodel = {};
employeeviewmodel.EmployeeId = $('#employeeId').val();
employeeviewmodel.FirstName = $('#employeeFirstName').val();
employeeviewmodel.MiddleName = $('#employeeMiddleName').val();
employeeviewmodel.LastName = $('#employeeLastName').val();

然后在你的ajax调用中对employeeviewmodel进行字符串化。您在 View 端定义的名称必须与您在 Controller 端查找的名称完全匹配