CODEWITHSUNDEEP
jqueryasp.net-mvc
Davy
Davy

Reputation: 1063

Loading a Partial View in MVC ASP.Net using jQuery

I'm very new to both of these so please forgive my basic question.

I have an index page like:

<div id="SearchBar">              
    <%= Html.Encode("Search by Site Name: ") + Html.TextBox("SearchTextBox") %>    
    <input type="submit" value="Search" id="jQuerySubmit" />   
</div>
<div id="SiteList">   
    <% Html.RenderPartial("SiteIndexSearchResults", Model); %>                     
</div>

This all works fine.

I want to reload this partial based on what the user types in 'SearchTextBox' (I've hardcoded this in controller for now - for test purposes)

I can't get the partial to reload using:

$(document).ready(function() {
    $("#jQuerySubmit").click(function() {
        $("#SiteList").load("/Site/IndexSearch/");         
    });
});

It goes into the controller and does return the new view based on IsAjaxResult being true but does not refresh the page.

Thanks in advance.

Davy

Upvotes: 0

Views: 1301

Answers (3)

Davy
Davy

Reputation: 1063

Thanks for the answers - both really helpful. I was returning a View instead of a PartialView in my controller (donkey).

I now have a textBox tha incrementally returns rows to my partial list based on a textbox val, which is what i was going for all along.

Thanks Again.

Davy

Upvotes: 0

Tomas Aschan
Tomas Aschan

Reputation: 60564

You need to stop the "normal" handling of the link click. In most browsers, this is done by letting the click handler return false, but in Firefox you can also use event.preventDefault(), like this:

$(function() { // Shorthand for the $(document).ready(function() { - does the same
    $('#jQuerySubmit').click(function(ev) { // Takes the event as a parameter
        ev.preventDefault();
        $('#siteList').load('/Site/IndexSearch/');
        return false;
    });
});

If there is a possibility that more links will be loaded with AJAX that you want to apply this behavior to, you can use .live() instead of .click(), like this:

$(function() {
    $('#jQuerySubmit').live('click', function(ev) {
        // The behavior is now applied to all links that are ever loaded on the page
        // that have the id set to jQuerySubmit.
        ...
    });
});

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

Since #jQuerySubmit is a form submit button you need to prevent the default action which is submitting the form normally (without AJAX). To do this you need to return false from your click handler:

$(document).ready(function() { 
    $("#jQuerySubmit").click(function() {
        $("#SiteList").load("/Site/IndexSearch/");         
        return false;
    });
})

Upvotes: 2

Related Questions