Question

我正在处理ASP.NET MVC4应用程序，我遇到了这个问题。我有一个@Url.Action()定义如下：

<a href="@Url.Action("Edit", 
             new { docId = Model.Page.Documents[j].DocumentID, 
                   PageID = Model.Page.PageID, 
                   docName = Model.Page.Documents[j].Name })" >Edit</a>

但正如名称所说，这应该将已编辑的数据发送到控制器操作，我将为此实体执行Update。 docId和PageID是我从模型中获取的数据库ID，我需要它们来识别我应该应用更改的正确实体，因此它们是静态的。但是docName是一个呈现的值：

@Html.TextBoxFor(m => m.Page.Documents[j].Name, new { id = Model.Page.Documents[j].DocumentID})

因此可以编辑此文本框中的文本，当单击@Url.Action("Edit"..)的链接时，我想获取文本框的当前值并将其发送回服务器。

您可以在上面看到我如何使用@url.Action("Edit"..)，但逻辑上：

docName = Model.Page.Documents[j].Name

保持从服务器传递的初始值，而不是文本框的当前值。我想不出更像MVC4的方式将数据发送到我的控制器所以我诉诸于我需要使用JavaScript（最好是jQuery）才能做到这一点。但是我在使用jQuery和在MVC4 Razor视图中使用jQuery的知识非常有限，所以我寻求指导。

我修改了我的@Url.Action("Edit"..)：

<a href="@Url.Action("EditDocumentName", 
                  new { @onclick="UpdatDocumentName(Model.Page.PageID);"})" >Edit</a>

并添加了这个小脚本：

<script>
    function UpdatDocumentName(id)
    {
        alert(id);
    }
</script>

我知道它甚至不能完成我的任务，但我甚至不确定我是否能够将值传递给JS函数。但由于似乎没有问题，我打算修改我的函数以获取两个参数：

function UpdatDocumentName(PageId, DocId)

并在函数内部获取文本框的值。

我的问题是，如何在我的JS函数中包含这些值，我可以将它们发送到Edit控制器中的Page操作？

P.S

我试图实现的是允许用户更新实体的某个属性，该属性是我视图上呈现的实体列表的一部分。在这里更具描述性是我的观点（种类）：

Entity list

生成如下：

@for (int j = 0; j < Model.Page.Documents.Count; j++ )
    {
        <tr>
            <td>
                @Html.TextBoxFor(m => m.Page.Documents[j].Name, new { id = Model.Page.Documents[j].DocumentID})
            </td>
            //more properties displayed...

如果我要使用表单提交更改，我必须将每个@Html.TextBoxFor(m => m.Page.Documents[j].Name包装在一个表单中，我不确定这是最好的方法。但我可能错了。

Update标题中的Delete图标旁边还有Delete图标，但我错过了显示。

Answer 1

更强大的解决方案

像这样定义你的控制器动作......

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(int pageId, int docId)
{
    //...do some stuff here to perform a delete

   return Json(new 
                  {
                     page = pageId,
                     doc = docId
                  });
}

然后在您的视图中，命令单元格应如下所示......

@using(Ajax.BeginForm("Edit", "Page", null, new AjaxOptions()
                                                {
                                                    OnSuccess = "deleteSucceeded,
                                                    OnFailure = "deleteFailed"
                                                }))
{
    @Html.AntiForgeryToken()
    <input type="hidden" name="pageId" value="@Model.Page.PageID"/>
    <input type="hidden" name="docId" value="@Model.Page.Documents[j].DocumentID"/>
    <input type="image" src="path_to_your_delete_image" title="Delete record" />
}

请注意，在ajax选项中，我分别为OnSuccess和OnFailure指定了javascript函数的名称。如果操作成功，则应从HTML表中删除该行，或者如果操作失败，则向用户显示消息。如何删除html行？使用jQuery很容易...首先将自定义数据属性添加到每一行，以便您可以轻松识别它们......

<tr data-doc-id="@Model.Page.Documents[j].DocumentID" data-page-id="@Model.Page.PageID"></tr>

然后像这样定义deleteSucceeded javascript函数......

function deleteSucceeded(jsonObj){
    $('tr[data-doc-id=' + jsonObj.doc + '][data-page-id=' + jsonObj.page + ']').remove();
}

希望有所帮助

Answer 2

您可以使用Html.BeginForm("Edit")帮助，并点击<input type="submit">发送到操作Edit您已更改的Document对象 - 如下所示：

http://blog.michaelckennedy.net/2012/01/20/building-asp-net-mvc-forms-with-razor/

据我了解，您只想在一个页面上编辑很多模型。如果是，您的解决方案非常不友好，您可以更好地实现它 - 如果您愿意，我可以展示更好的方法。

如何使用ASP.NET MVC4中的jQuery向Action发送值

2 个答案:

更强大的解决方案