0

我有一个网络表单，要求用户提供他们的 ID。我的总体目标是能够获取 id 并调用函数并返回一个类。该类将返回用户名、电子邮件和城市。我还没有那么远。我还在第一阶段。

我的html代码正确吗？当按下按钮时，我希望用户输入传递给控制器​​？

我想从 html 中的输入文本中获取文本。我想从我的 html 表单中的输入接收文本。然后将该文本带到调用用户类并显示该类的控制器

<html>
       <div align="center">
        <form id="searchUser" method="post" action="">
            <table align="center">
        <tr>
            <td class="label">
           Enter ID:
             </td>
            <td>
                <input type="text" name="UserId" id="UserId" />
            </td>
        </tr>
        <tr>
            <td>
                <button class="searchButton" id="searchButtong">Search</button>
            </td>
        </tr>
      </table>
     </form>
   </div>
   <hr /> 
</html>


Search Controller

 public class SearchController : Controller
{
    //
    // GET: /Search/

    public ActionResult Index()
    {
        return View();
    }

    public string searchUser(string UserId)
    {
        UserId = Request["UserId"];
        return UserId;
    }
}
4

4 回答 4

2

您已经UserId在控制器操作中声明了变量。您不需要从后面获取它Request：

public class SearchController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]    
    public ActionResult SearchUser(string UserId)
    {
        User user = ... go and fetch the user given the user id 
        // from wherever your users are stored (a database or something)
        return View(user);
    }
}

现在你可以让你的视图强类型化到User类，并有一个部分显示结果：

<%@ Page 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.User>"
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
   <div align="center">
        <% using (Html.BeginForm("SearchUser", "Search")) { %>
            <table align="center">
                <tr>
                    <td class="label">
                        Enter ID:
                    </td>
                    <td>
                        <input type="text" name="UserId" id="UserId" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="searchButton" id="searchButtong">Search</button>
                    </td>
                </tr>
            </table>
        <% } %>
    </div>

    <hr /> 

    <% if (Model != null) { %>
        <!-- Display the User results here -->
        <div>
            <%= Html.DisplayFor(x => x.FirstName) %>
        </div>
        <div>
            <%= Html.DisplayFor(x => x.LastName) %>
        </div>
    <% } %>
</body>
</html>

现在您已经使用标准 HTML 技术实现了这个功能，您可以通过引入 AJAX 来改进它：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
</head>
<body>
    <div align="center">
        <% using (Ajax.BeginForm("SearchUser", "Search", null, new AjaxOptions { UpdateTargetId = "results" })) { %>
            <table align="center">
                <tr>
                    <td class="label">
                        Enter ID:
                    </td>
                    <td>
                        <input type="text" name="UserId" id="UserId" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="searchButton" id="searchButtong">Search</button>
                    </td>
                </tr>
            </table>
        <% } %>
    </div>

    <hr /> 

    <div id="result"></div>

    <!-- TODO: Adjust with the proper version of jQuery that you are using -->
    <script src="<%= Url.Content("~/Scripts/jquery-1.7.1.min.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" type="text/javascript"></script>
</body>
</html>

然后让您的控制器操作返回 PartialView：

[HttpPost]    
public ActionResult SearchUser(string UserId)
{
    User user = ... go and fetch the user given the user id 
    // from wherever your users are stored (a database or something)
    return PartialView(user);
}

您需要定义（~/Views/Search/SearchUser.ascx）：

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<mVCaPPLICATION1.mODELS.uSER>" 
%>
<!-- Display the User results here -->
<div>
    <%= Html.DisplayFor(x => x.FirstName) %>
</div>
<div>
    <%= Html.DisplayFor(x => x.LastName) %>
</div>
于 2012-09-24T11:18:46.750 回答
1

最简单的方法可能是向操作发出 AJAX 请求，并让操作以 JSON 格式返回正确的数据。

public JsonResult YourActionName(int id)
{
    // Fetch your data from DB, or create the model
    // in whatever way suitable
    var model = new YourModel {
        UserName = "Something"
    };

    // Format the response as JSON
    return Json(model);
}
于 2012-09-24T11:17:47.233 回答
1

您的表单标签决定了用户提交表单时 POST 的去向。您目前拥有：

<form id="searchUser" method="post" action="">

这会将 POST 定向到当前地址。

您可以使用 MVC 表单助手轻松更改此设置：

@using (Html.BeginForm()) {
    //Your form here
}

或者，您可以使用正确的 URL 或 URL 助手手动启动它。

网址助手

<form id="searchUser" method="post" action="@Url.Action("searchUser", "Search")">

手摇

<form id="searchUser" method="post" action="/Search/searchUser/">
于 2012-09-24T11:21:34.903 回答
1 
$(function(){
  $("#searchButtong").click(function(e){
    e.preventDefault();
    var usrId=$("#UserId").val();
    $.getJSON("@Url.Action("searchUser","search")/"+usrId,function(data){
        //here you may set this to a div in the dom instead of alerting.
        alert(data.UserName);
        alert(data.UserID);
    });
  });
});

假设您有返回这样的 JSON 的操作

public ActionResult searchUser(int id)
{
  UserEntity user=repo.GetUserFromID(id);
  return Json(new { UserName=user.UserName, ID=id},
                                                JsonRequestBehaviour.AllowGet);
}
于 2012-09-24T11:22:42.943 回答