CODEWITHSUNDEEP
asp.netasp.net-mvc-4
rollo
rollo

Reputation: 305

Ajax.BeginForm in asp.net

The issue i am facing has taken more then 8 hours but couldn't find the solution to it. I am trying to implement ajax functionality in MVC4. I've following code in index view.

@using (Ajax.BeginForm(
        new AjaxOptions
        {

            HttpMethod = "get",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "resturantList"
        }
    ))
{ 
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
}

<div id="resturantList">

    @foreach (var item in Model)
    { 
        <div>
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <div>Reviews: @item.CountOfReviews</div>
            <hr />
        </div>
    }
</div>

Following is html which renders when search button is clicked.

"screenshot of application"

I've checked the script files references by firebug even they are included

<script src="/Scripts/jquery-2.1.0.js">
<script src="/Scripts/jquery-ui-1.10.4.js">
<script src="/Scripts/jquery.unobtrusive-ajax.js">
<script src="/Scripts/jquery.validate.js">
<script src="/Scripts/jquery.validate.unobtrusive.js">

Tried to remove the

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

from web.config file which solves the above stated issue but it also disables the client side validations.

Upvotes: 0

Views: 134

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You are not telling the form to post the data on which action of which controller, this is causing the problem,do like this, pass controller and action name as well:

@using (Ajax.BeginForm(
"Action", "Controller",
        new AjaxOptions
        {

            HttpMethod = "get",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "resturantList"
        }
    ))
{ 
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
}

<div id="resturantList">

    @foreach (var item in Model)
    { 
        <div>
            <h4>@item.Name</h4>
            <div>@item.City, @item.Country</div>
            <div>Reviews: @item.CountOfReviews</div>
            <hr />
        </div>
    }
</div>

and second thing,make sure you are returning a partial view,if full view is returing that will also cause issues.Do this in you view for it:

@{

Layout = null

}

Actually you have to return partial view in the response of ajax call

Upvotes: 3

Related Questions