Question

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

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

Answer 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"});  
        }
    }

Answer 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。

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

2 个答案: