[RESOLVED]Search Form Sumbit best way in MVC

I have a search form where users have to select their search parameters and then pressed Search Button.I am using MVC4 and i have two options to user here

  1. Use the Search button as submit button and submit whole form and refresh whole page.Some thing like this
     <input type="submit" value="Search" />
  2. Call a JS function on click like
    <input type="button" onclick="getData()" value="Search" />
     function getData() {
            
            var procemessage = "Please wait...";
            $('#divv').html(procemessage).show();
            var url = "/TestValidUser/Citylist/";
        
            $.ajax({
                url: url,
                data: { id: _stateId },
                cache: false,
                type: "POST",
                success: function (data) {
                    
                    $('#divv').html(data);
                },
                error: function (reponse) {
                    alert("error : " + reponse);
                }
            });
    
        }

    I have two questions,

    – Which approach is good(faster and reliable)

          — How we can maintain controls states(selected values) in first approach

methewjay

Which approach is good(faster and reliable)

Reliable – POST.  Faster in the user eye- Ajax.

methewjay

How we can maintain controls states(selected values) in first approach

Generally speaking in MVC

return View(Model).

You can do both by using an Ajax.Form.  If the user has js enabled then the form and results are done by ajax, otherwise the request is handled as a normal post.

methewjay

– Which approach is good(faster and reliable)

Well the form submission approach (#1) is going to be more reliable as it doesn’t have a reliance on Javascript at all, whereas the second approach does (and wouldn’t work if Javascript was disabled). From the perspective of the user however, the
second AJAX-based approach is going to be a bit more responsive as the entire page will not post back.

methewjay

– How we can maintain controls states(selected values) in first approach

You could store your search value in the TempData collection which would persist until the next request is made (which is just how long you would need it). Basically, when your page is posted, you grab your search term and store it as follows :

[HttpPost]
public ActionResult YourControllerAction(string search)
{
     // Store your search term temporarily
     TempData["Search"] = search;
 
     // Your other code here

     // Output your View (and pass any data back)
     return View(...);
}

And then add the following in your View to check for a SearchTerm in the TempData and populate it if one is present :

<input id='search' name='search' value='@TempData["Search"]' />

AidyF

You can do both by using an Ajax.Form.  If the user has js enabled then the form and results are done by ajax, otherwise the request is handled as a normal post.

Oh nice one,How we can do both at once??I think we can do one at a time….

What I meant was that one solution covers both scenarios, so ajax is used if possible and a form post if not so you don’t have to worry about which the best approach to use is, as it will use one and fail back to the other if necessary.

Leave a Reply