CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-3partial-views
Jared Eccles
Jared Eccles

Reputation: 127

MVC3 with ASP.NET Displaying data results after form submit on the same view

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.

Upvotes: 1

Views: 2176

Answers (2)

Fran
Fran

Reputation: 6520

I would split the page name from the POST. I'd also name your form so that it's easier to deal with in the jquery. That will also allow you to serialize the entire form and not have to grab each piece of data separately.

Then use a jquery call like this to submit the form on click

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

create a partial view that takes the results from your query and styles it into an html table. that way your partial view is returning html and you can use the calls in the success handler to replace the html in the div.

Upvotes: 0

Rafay
Rafay

Reputation: 31033

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

Upvotes: 1

Related Questions