如何将带有 Url.Action 的 html 文本框值发送到控制器操作方法输入参数？

Question

我是 asp.net mvc 的新手，想读取 html 文本框值并将其发送到控制器操作方法参数，为此在视图页面中编写以下代码：

<a href="@Url.Action("Item", "Store", new {parentPartId = @item.Id,UserID=12})">@item.BookName</a>

在url action 在此段中：
UserID=html 文本框值
读取值并将其发送到控制器中的此操作：

public ActionResult Item(int parentPartId,int UserID)
        {
}

在视图页面中，我的文本框是这样的：

<input type="text" id="USERID"/>

我该如何解决这个问题？谢谢。

Answer 1

您需要通过模型/表单集合放置表单并发布您的数据

查看代码

@using (Html.BeginForm("SaveData", "TestCont", FormMethod.Post, new { Id = "frmTest", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <input type="text" id="USERID" name="UserID"/>
}

控制器：

[HttpPost]
[ValidateInput(false)]
public ActionResult SaveData(FormCollection form)
{
    string html = Convert.ToString(form["UserID"]);
}

请务必标记[ValidateInput(false)]，否则会在发布 html 时引发错误

您可以在表单中放置一个提交按钮来发布它，或者在 JavaScript 中使用$('#frmTest').submit()

Answer 2

您可以处理超链接的点击事件并将文本框中的值注入其中，如下所示：

HTML：

<a class="BookName" href="" data-id="@item.Id">@item.BookName</a>

脚本（假设你有 jQuery，但如果没有的话很容易重写）：

$(".BookName").click(function(event)
{
  event.preventDefault();
  var url = '@Url.Action("Item", "Store", new {parentPartId = "PARENT_ID",UserID="USER_ID"})';
  url = url.replace("USER_ID", $("#USERID").val());
  url = url.replace("PARENT_ID", $(this).data("id"));
alert(url); //just for debugging
  window.location.href = url;
});

您可能希望在执行此操作之前检查输入值是否有效，但这将帮助您开始。

Answer 3

文本框值是动态的。这取决于用户输入。 Razor 标记在服务器上编译并发布到客户端。因此，您的 razor 代码无法理解用户将对您的文本区域做什么。您需要一个动作触发方法，包括确定文本框的值并发送到服务器。你可以使用ajax函数。 在 Jquery 的帮助下。

我认为@item 是一个循环变量。 你可以像下面这样改变你的代码

<a onClick="myFunction(@item.id)">@item.BookName</a>

如您所见，我捕获了 id 并作为参数输入。 这是您的文本区域

<input type="text" id="USERID"/>

这是获取文本框值并将其发送到您的操作的 javascript 函数

function myFunction(id){
    var userId = document.getElementById("UserID").value;
    var data ={
        parentPartId:id,
        UserID:userId
    }

    $.ajax({          //Jquery stuff
            url : '/Store/Item'
            type:'POST',
            data:data
            dataType:'json'
            success:function(){//You can handle succes scenario}
        });
}

查看数据的结构，它是一个 JSON 对象。参数名称与您的操作参数相同。当你发送它。 MVC 将理解逻辑并匹配参数和值。 )