ajax - 从 MVC 中的 View 调用 Controller 方法

Question

我是 MVC 框架的新手，这里遇到了更新方法的问题，有人可以帮助我吗？

View 中的 MyCode:

       <table>
        <% if (Model == null || Model.Count <= 0)
        {
        %>
        <tr>
        <td >
     No Records found !!.Please search.
     </td>
     </tr>
    <% }
     else
     {
     foreach (var item in Model)
     { %>

     <tr>
     <td>Id</td>
     <td><%: item.ID %></td>

    <tr>
     <td > System : </td>
    <td >                                                                        
     <input id="txtSystemName" value=' <%: item.System %>' type="text"style="height: 20px; width: 120px;" />
     </td>
     <td >TaskName :</td>
    <td><input id="txtTaskName" value='<%: item.TaskName %>' class="TextBoxStyle" type="text"
    style="height: 20px; width: 340px;" /><td/>
    <tr>

    <tr>
    <td><input id="Submit1" name="btnSave" type="submit" value="Save" class="ButtonStyle"
     style="width: 100px; height: 20px" /></td>
    </tr>
<%
}
}
%>

上面是我的代码，在这里我将获取 View 中的记录，上面的代码不包含我只粘贴了 3 个字段的所有属性，并且我更新了输入字段中的一些名称，并且我单击了按钮我只想更新该表的记录值，我想知道如何调用 Controller 方法并将参数传递给该方法。

任何人都可以帮我解决这个问题吗？ 提前致谢。

Answer 1

这就是我给你的建议。从代表表行的 View 模型开始:

public class MyViewModel
{
    public int Id { get; set; }
    [Required]
    public string SystemName { get; set; }
    public string TaskName { get; set; }
}

然后是一个 Controller ，其中包含列出所有模型和更新单行的操作:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // I have hardcoded some data here in order to return a list
        // of models => in your case you would probably fetch those from
        // some data source
        var model = Enumerable.Range(1, 7).Select(x => new MyViewModel
        {
            Id = x,
            SystemName = "system " + x,
            TaskName = "task " + x
        });
        return View(model);
    }

    [HttpPost]
    public ActionResult Update(MyViewModel model)
    {
        // This action will be responsible for updating the view model
        if (ModelState.IsValid)
        {
            // The model is valid
            // TODO: update it using a repository
            return Json(new { success = true });
        }
        // there was an error => redisplay the view so that the user can fix it
        return PartialView("_MyViewModel", model);
    }
}

然后让我们进入主视图 (~/Views/Home/Index.aspx):

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<AppName.Models.MyViewModel>>" 
%>

...

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>System name</th>
            <th>Task name</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <% if (Model == null || Model.Count() < 1) { %>
            <tr>        
                <td colspan="4">
                    No Records found !! Please search.
                </td>
            </tr>
        <% } else { %>
            <% foreach (var item in Model) { %>
                <%= Html.Partial("_MyViewModel", item) %>
            <% } %>
        <% } %>
    </tbody>
</table>

然后我们为 View 模型定义一个部分(~/Views/Home/_MyViewModel.ascx):

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" 
%>
<tr>
    <% using (Html.BeginForm("Update", "Home", FormMethod.Post, new { @class = "updateForm" })) { %>
        <td>
            <%= Html.DisplayFor(x => x.Id) %>
            <%= Html.HiddenFor(x => x.Id) %>
        </td>
        <td>
            <%= Html.EditorFor(x => x.SystemName) %>
            <%= Html.ValidationMessageFor(x => x.SystemName) %>
        </td>
        <td>
            <%= Html.EditorFor(x => x.TaskName) %>
            <%= Html.ValidationMessageFor(x => x.TaskName) %>
        </td>
        <td>
            <input type="submit" value="Update" />
        </td>
    <% } %>
</tr>

最后一部分是对这些表单进行 AJAX 化。这可以使用 jquery 在单独的 javascript 文件中以不显眼的方式完成:

$(function() {
    $('.updateForm').submit(function () {
        var form = $(this);
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (!result.success) {
                    form.closest('tr').replaceWith(result);
                } else {
                    alert('record successfully updated');
                }
            }
        });
        return false;
    });
});