带有 ASP.NET 的 MVC3 在同一视图上提交表单后显示数据结果答案

【问题标题】：MVC3 with ASP.NET Displaying data results after form submit on the same view带有 ASP.NET 的 MVC3 在同一视图上提交表单后显示数据结果
【发布时间】：2012-05-11 14:45:00
【问题描述】：

我目前正在开发一个 MVC3 ASP.NET 应用程序，该应用程序要求用户在表单中填写一些简单的文本框，然后点击提交按钮。

单击提交按钮时，控制器使用来自文本框的输入并使用 LINQ to SQL 调用存储过程查询 SQL 数据库并返回数据表。目前，提交按钮将在新视图页面上的表格中显示数据，但是我希望对其进行修改，以使生成的数据表直接加载到提交按钮下方，而无需刷新页面。

现在我知道使用 AJAX 或 Jquery 都是必要的，我只是在努力理解如何在不将用户发送到新页面的情况下呈现数据。

查看页面中的表单：

<% using (Html.BeginForm("RunQuery","RecentActivity"))
   {%>

    <fieldset>
        <legend></legend>
        <p>
            <label for="Name">Name:</label>
            <%= Html.TextBox("Name") %>
            <%= Html.ValidationMessage("Name", "*") %>

        </p>
        <p> <label for="StartDate"> Start Date:</label>
            <%= Html.TextBox("StartDate")%>
            <%= Html.ValidationMessage("StartDate", "*") %>

            <label for="EndDate"> End Date:</label>
            <%= Html.TextBox("EndDate") %>
            <%= Html.ValidationMessage("EndDate", "*") %>
        </p>

        <p>
            <input type="submit",id="submit", value="Submit" />
        </p>

      </fieldset>   
<% } %>

控制器：

    ModelDataContext db = new ModelDataContext();
    [HttpPost]

    public ActionResult RunQuery(string Name,string StartDate, string EndDate)
    {

        var results= db.lastndays(Name, StartDate, EndDate);
        return View(results.ToList());  
    }

任何帮助都会很棒，谢谢。

【问题讨论】：

标签： jquery ajax asp.net-mvc-3 partial-views

【解决方案1】：

你可以试试

$(":submit").click(function(e){
 e.preventDefault(); //this will prevent the form from submitting
 var $name=$(":input[name='Name']");
 var $StartDate=$(":input[name='StartDate']");
 var $EndDate=$(":input[name='EndDate']");
 //if you are using unobtrusive validation
 if($('form').valid()){
 $.post("/",{Name:$name,StartDate:$StartDate,EndDate:$EndDate},function(data){
   if(data.results!='error')
       console.log(data.results);
  },'json');
}else alert('form not valid');
});

在控制器中

[HttpPost]
    public JsonResult RunQuery(string Name,string StartDate, string EndDate)
    {
        var results= db.lastndays(Name, StartDate, EndDate);
        if(/*there are results*/){
         return Json(new{results=results.ToList()});  
         }else{
          return Json(new{results="error"});  
        }
    }

【讨论】：

关于控制器代码的问题：在 if(results)... 如果有帮助，我收到错误“无法隐式转换类型 ... 到 bool”，模型正在从SQL
我只是把那行放在检查是否有结果你可以将它修改为if(results.Count>0)db.lastndays返回一个列表吗？
存储过程“lastndays”生成一个数据表。

【解决方案2】：

我会从 POST 中拆分页面名称。我还会为您的表单命名，以便在 jquery 中更容易处理。这也将允许您序列化整个表单，而不必单独获取每条数据。

然后使用这样的 jquery 调用在点击时提交表单

$(":submit").live('click', function () {
    $.ajax({
        url: "/RecentActivity/RunQuery",
        type: "POST",
        data: $("#QueryForm").serialize(),
        error: function (data) {
            var errorMessage = $.parseJSON(data.responseText);
        },
        success: function (data) {
            if (data) {
                $('#results-div').html(data);
            }
            else {
                $('#results-div').html('no data');
            }
        }
    });

    return false;
});

创建一个局部视图，从您的查询中获取结果并将其样式化到一个 html 表中。这样，您的部分视图将返回 html，您可以使用成功处理程序中的调用来替换 div 中的 html。

【讨论】：