logo标签列表

ASP.NET MVC 从视图向控制器传递数据

asp.net-mvc
13

我有一个视图，其中包含添加到工作站的项目的网格。用户可以从下拉列表中选择一个项目，然后单击操作链接，调用控制器将该项目添加到工作站。我可以通过在控制器的Post操作中读取FormCollection对象使其正常工作。

<p>
    <% using(Html.BeginForm("AddItem", "Home")) { %>
    <label for="ItemID">Item:</label>
    <%= Html.DropDownList("ItemID", Model.ItemsList) %>
    <%= Html.Hidden("WorkstationID", Model.Workstation.RecordID) %>
    <input type="submit" value="Submit" />
    <% } %>
</p>

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddItem(FormCollection formValue)
{
    long workstationId = Convert.ToInt64(formValue["WorkstationID"]);
    long itemId = Convert.ToInt64(formValue["ItemID"]);

    Workstation workstation = itilRepository.FindWorkstation(workstationId);
    Item item = itilRepository.FindItem(itemId);

    itilRepository.AddItem(workstation, item);
    itilRepository.Save();

    return Content("Item added successfully!");
}

我想要做的是使用Ajax.ActionLink向控制器提交工作站ID和项目ID这两个参数，并让新添加的项插入到网格中。我像这样呈现网格：

<table>
      <tr>
        <th></th>
      <th>
        Name
      </th>
      <th>
        Service Tag
      </th>
      <th>
        Serial Number
      </th>
    </tr>

    <% foreach (var item in Model.Items) { %>

    <tr>
      <td>
        <%= Html.ActionLink("Edit", "ItemEdit", new { id = item.RecordID }) %> |
        <%= Html.ActionLink("Details", "ItemDetails", new { id = item.RecordID   })%>
      </td>
      <td>
        <%= Html.Encode(item.Name) %>
      </td>
      <td>
        <%= Html.Encode(item.ServiceTag) %>
      </td>
      <td>
        <%= Html.Encode(item.SerialNumber) %>
      </td>
    </tr>

    <% } %>

</table>

我的问题是，当我使用ActionLink提交时，我无法弄清如何将参数传递给控制器，并且如何在不重新加载整个视图的情况下更新网格。

我非常感谢任何帮助，甚至是指向类似操作的教程链接。

谢谢！

这是工作版本，唯一的问题是当控制器返回局部视图时，所有渲染都只是局部视图，实际页面已经消失了。

<% using (Ajax.BeginForm("AddItem", null, 
        new AjaxOptions
        {
            UpdateTargetId = "ResultsGoHere",
            InsertionMode = InsertionMode.Replace
        }, 
        new { @id = "itemForm" } ))
{ %>

    <label for="ItemID">Item:</label>
    <%= Html.DropDownList("itemId", Model.ItemsList) %>
    <%= Html.Hidden("workstationId", Model.Workstation.RecordID) %>

    <a href="#" onclick="$('#itemForm').submit();">Submit</a>

    <div id="ResultsGoHere">
        <% Html.RenderPartial("WorkstationItems", Model.Items); %>
    </div>

<% } %>

不确定原因，替换之前操作是正确的，但控制器没有获得下拉框的值。现在控制器已经获得了值，但返回的局部视图将替换整个页面。

操作方法：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddItem(string workstationId, string itemId)
{
    long lworkstationId = Convert.ToInt64(workstationId);
    long litemId = Convert.ToInt64(itemId);

    Workstation workstation = itilRepository.FindWorkstation(lworkstationId);
    Item item = itilRepository.FindItem(litemId);

    IQueryable<Item> items = itilRepository.AddItem(workstation, item);
    itilRepository.Save();

    return PartialView("WorkstationItems", items);
}

这是负责所有工作的视图的HTML:

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Workstation Details
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <link type="text/css" href="/../Content/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
    <script type="text/javascript" src="/../Content/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/../Content/js/jquery-ui-1.7.2.custom.min.js"></script>

    <h2>
        Workstation Details</h2>
    <fieldset>
        <legend>Fields</legend>
        <p>
            Record ID:
            <%= Html.Encode(Model.Workstation.RecordID) %>
        </p>
        <p>
            Name:
            <%= Html.Encode(Model.Workstation.Name) %>
        </p>
        <p>
            Description:
            <%= Html.Encode(Model.Workstation.Description) %>
        </p>
        <p>
            Site:
            <%= Html.Encode(Model.Workstation.Site.Name) %>
        </p>
        <p>
            Modified By:
            <%= Html.Encode(Model.Workstation.ModifiedBy) %>
        </p>
        <p>
            Modified On:
            <%= Html.Encode(String.Format("{0:g}", Model.Workstation.ModifiedOn)) %>
        </p>
        <p>
            Created By:
            <%= Html.Encode(Model.Workstation.CreatedBy) %>
        </p>
        <p>
            Created On:
            <%= Html.Encode(String.Format("{0:g}", Model.Workstation.CreatedOn)) %>
        </p>
    </fieldset>
    <fieldset>
        <legend>People</legend>
        <% Html.RenderPartial("WorkstationPeople", Model.People); %>
    </fieldset>
    <fieldset>
        <legend>Positions</legend>
        <% Html.RenderPartial("WorkstationPositions", Model.Positions); %>
    </fieldset>
    <fieldset>
        <legend>Items</legend>

            <% using (Ajax.BeginForm("AddItem", "Home", null, 
                    new AjaxOptions
                    {
                        UpdateTargetId = "ResultsGoHere",
                        InsertionMode = InsertionMode.Replace
                    }, 
                    new { @id = "itemForm" } ))
            { %>

                <label for="ItemID">Item:</label>
                <%= Html.DropDownList("itemId", Model.ItemsList) %>
                <%= Html.Hidden("workstationId", Model.Workstation.RecordID) %>

                <a href="#" onclick="$('#itemForm').submit();">Submit</a>

                <div id="ResultsGoHere">
                    <% Html.RenderPartial("WorkstationItems", Model.Items); %>
                </div>

            <% } %>
    </fieldset>
    <br />
    <p>
        <%=Html.ActionLink("Edit", "WorkstationEdit", new { id = Model.Workstation.RecordID }) %>
        |
        <%=Html.ActionLink("Back to List", "Index") %>
    </p>
</asp:Content>
5个回答
15
你期望从 AJAX 调用中得到什么结果？
你可以使用 AjaxHelper 对象的帮助方法来渲染链接，而不是使用 HtmlHelper。例如，要使用 AJAX HttpPOST 调用获取新内容并将其插入到 id 设置为 ResultsGoHere 的 <div> 中，你可以渲染以下链接：
<%= Ajax.ActionLink("Edit", "ItemEdit", 
                         new {
                             itemId = item.RecordId, 
                             workstationId = myWorkStationId
                         },
                         new AjaxOptions {
                             HttpMethod="POST",
                             UpdateTargetId="ResultsGoHere",
                             InsertionMode = InsertionMode.Replace 
                         }) %>

在您的ActionMethod中，您可以简单地测试Request.IsAjaxRequest()来决定返回什么：

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ItemEdit(string itemId, string workstationId) {
    // edit the item and get it back

    if (Request.IsAjaxRequest()) {
        return PartialView("SingleItem", item);
    }
    return RedirectToAction("ItemEdit", new { itemId = item.RecordId, workstationId = workstationId });
}

// fallback for get requests
public ActionResult ItemEdit(string itemId, string workstationId)
{
    // do stuff and return view
}
太好了！我还有一个问题，如何将两个ID传递给控制器？我需要传递工作站ID和项目ID。我该如何提取下拉列表中选择的itemId并在Action Link中使用它？ - Lukasz
你可以在Action方法中添加一个输入参数，并将其添加到路由值中。如果你想为调用获取一个漂亮的URL，你需要添加相应的路由。我已经相应地编辑了我的代码。 - Tomas Aschan
最后一个问题，如何在 Ajax.ActionLink 中获取下拉列表的选定值？ - Lukasz
实际上，使用Ajax.BeginForm()方法创建一个小的HTML表单元素，并使用Ajax请求进行提交可能会更容易。我将在另一篇帖子中编写另一种答案，您可以选择最适合您的答案作为接受的答案。 - Tomas Aschan
2
这是使用 Ajax.BeginForm() 方法的实现方式： 

<% using (Ajax.BeginForm("ItemEdit", null, new AjaxOptions
            {
                UpdateTargetId = "ResultsGoHere",
                InsertionMode = InsertionMode.Replace
            }, new { @id = "itemForm" } )
{ %>
<p>
    <%= Html.DropDownList("itemId") %></p>
<p>
    <%= Html.DropDownList("workstationId") %></p>
<p>
    <a href="#" onclick="$('#itemForm').submit();">Submit</a>
</p>
<% } %>

请注意，此代码当前状态下并不完全可用 - 下拉列表没有从任何地方获取它们的项目，没有 <div> 处理来自 AJAX 请求的结果，而在提交表单的链接上的 onclick 属性需要包含 jQuery（在这种情况下最好给链接一个 id 并从单独的 js 文件中添加一个 click() 事件处理程序...）。
编辑：哦，我还没有验证将 null 值传递给 routeValues 参数是否可以。如果不行，只需提供控制器和操作名称，就可以了。
你的渲染HTML长什么样？还有你的ActionMethod呢？ - Tomas Aschan
HTML只是部分视图的代码。另外，URL为/Home/WorkstationDetail/1，在提交后变为/Home/AddItem。 - Lukasz
我指的是在进行POST之前的HTML - 也就是整个表单在您的机器上呈现的方式。 - Tomas Aschan
我已经添加了视图的源代码。感谢所有帮助，我非常感激。 - Lukasz
我解决了，如果我使用常规的输入按钮，那么它可以正常工作。这一定与JavaScript有关。 - Lukasz
0

这是如何通过actionLink发送多个参数的方法。
对于这种情况，请参考下面的代码：

@Html.ActionLink("Link text", "Action Name", null, routeValues: new { pram_serviceLine = Model.ServiceLine_ID, pram_Month = Model.Month, pram_Year = Model.Year, flag = "ROTATION" }

如果它有效，请回复。

0

据我所知，在这里我们可以通过两种方式将数据从视图传递到控制器...

使用内置的关键字Formcollection，可以像这样过滤：
[HttpPost]
public string filter(FormCollection fc)
{
    return "欢迎来到过滤器："+fc[0];
                    (或者)
    return "欢迎来到过滤器："+fc["视图中控件的ID"];

}

FormCollection 只有在单击表单内的任何按钮时才起作用。在其他情况下，它只包含空数据。

使用模型类 [HttpPost] public string filter(classname cn) { return "欢迎进行过滤：" + cn.Empid + ""+cn.Empname; }
0
如何使用ajax.actionlink将模型从视图传递到控制器的post create操作？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接