从MVC中的视图调用控制器方法

时间:2011-07-02 12:47:11

标签: ajax model-view-controller asp.net-mvc-2 jquery

我是MVC框架的新手,在这里坚持使用更新方法,任何人都可以帮助我吗?

视图中的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>
<%
}
}
%>

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

任何人都可以帮助我。 提前谢谢。

2 个答案:

答案 0 :(得分:3)

这是我建议你的。从一个代表表格行的视图模型开始:

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

然后是一个控制器,它将包含列出所有模型和更新单行的操作:

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>

然后我们为视图模型定义部分(~/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>

最后一部分是AJAXify这些表单。这可以使用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;
    });
});

答案 1 :(得分:0)

我通常在控制器中有两个Action方法。一个处理GET而另一个处理POST。原始页面加载是一个GET,所以这就是这个人:

[HttpGet]
public ActionResult Tasks()
{
    // get your object/model.
    List<Task> tasks = DataAccessLayer.GetTasks();

    // pass your model to the strongly-typed view.
    return View(tasks);
}


[HttpPost]
public ActionResult Tasks(List<Task> tasks)
{
    // check if all model property requirements are satisfied.
    if (ModelState.isValid)
    {
        // ... update tasks...
    }

    // return updated objects/model to view.
    return View(tasks);
}

此外,您应该切换到使用Html Helpers,而是手动半绑定模型属性。然后,您的模型属性将轻松映射到页面上的元素。例如:

<%: Html.TextBoxFor(m => m.Name) %>

这将为模型的Name属性呈现类似<input type="text" id="Name" name="Name" />的内容(假设它是Task对象)。

处理模型中的列表(或模型本身)的一种方法是强制输入字段“name”属性包含列表的索引属性。例如,请查看:

Model Binding To A List

处理列表的另一种方法是为通用列表创建自定义Html Helper。以下是一些帮助的链接:

ASP.Net MVC HTML List helper

ASP.NET MVC 3 : Creating a Custom HTML Helper to Render List of Models as a Table

我没有在代码中看到您的表单定义,但默认情况下,提交按钮应提交表单并调用传递给模型/对象的POST方法。

希望这有帮助。