1

我目前正在开发一个 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());  
    }

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

4

2 回答 2

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"});  
        }
    }
于 2012-05-11T14:57:14.480 回答
0

我会从 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。

于 2012-05-11T19:25:47.933 回答