Question

I am currently working on an MVC3 ASP.NET application which requires the user to fill out a few simple text boxes in a form and then hit the submit button.

When the submit button is clicked, the controller uses the inputs from the text boxes and uses LINQ to SQL to call a stored procedure query an SQL Database and return a table of data. Currently the submit button will display the data in a table on a new viewpage, however I’m looking to modify this to have the data table that is produced to load directly below the submit button without refreshing the page at all.

Now I understand the use of either AJAX or Jquery will be necessary, I’m just struggling to understand how to present the data without sending the user to a new page.

Form in the view page:

<% 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>   
<% } %>

Controller:

    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());  
    }

Any help would be great, thanks.

Answer 1

you can try

$(":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');
});

in the controller

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