代码仍会在新页面上加载内容

Question

Hi I have problem with my MVC application. I would like click on ActionLink > load data from server > and insert data to div in same page. But my code still loads content on new page and I don`t have idea why. Anybody to help me ?

This is my Index.cshtml in HomeController,

    @model IEnumerable<Kango_kmen.KangoKmenWS.WSEntityInfo>
    @Content.Script("jquery-1.9.1.min.js", Url)
    @Content.Script("jquery.unobtrusive-ajax.min.js",Url)
    @Content.Script("jquery.unobtrusive-ajax.js",Url)
    @Content.Script("myScript.js",Url)

    @section Entities{


    <table>
    <tr>
    <th>
      <input type="submit" value="zobrazit" />
    </th>
    <th>
        iD
    </th>
    <th>
        name
    </th>

    </tr>

    @foreach (var item in Model) {
    <tr>
    <td>
    @Ajax.ActionLink("..", "CheckEntity", new { id = item.iD }, 
            new AjaxOptions{ UpdateTargetId="properties",
                             HttpMethod="GET",
                             InsertionMode=InsertionMode.InsertAfter,
            })
    </td>
    <td>            
        @Html.DisplayFor(modelItem => item.iD)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.name)
    </td>

    </tr>  
    <tr>
     <td>
         <div id="properties">

         </div>
     </td>
    </tr>
     }
    </table>
     }


     @section PropertyInfo{
     <p>Property info</p>
     } 

     @section Properties{
     <p>properties</p>
     }

And here is my Controller in HomeController

    public PartialViewResult CheckEntity(int id)
    {

        var model = WSConnect.getEntityInfo(id);
        if(model !=null){
            return PartialView("CheckEntity", model.property);
        }
        var modell = new WSEntityInfo[0];
        return PartialView("CheckEntity", modell);
    }

and ChecktEntity is the Partial view but everytime I click on ActionLink controller load url: /Home/ChceckEntity/1000 for exmaple on view data on this new page "(

Answer 1

There are 2 things wrong with your code:

1. You have included the jquery.unobtrusive-ajax.js script twice, once the minified version and once the standard version. You should include it only once
2. The jquery.unobtrusive-ajax.js is not compatible with jquery 1.9.1 because one of the breaking changes in jQuery 1.9 is that the .live() method was removed and the jquery.unobtrusive-ajax.js script relies on it. If you look at your javascript console you would see the following error: The .live method is undefined. . So if you want to use the unobtrusive AJAX functionality in ASP.NET MVC you will have to downgrade the version of jQuery. For example the 1.8.3 version should be fine.

So:

@model IEnumerable<Kango_kmen.KangoKmenWS.WSEntityInfo>
@Content.Script("jquery-1.8.3.min.js", Url)
@Content.Script("jquery.unobtrusive-ajax.min.js", Url)
@Content.Script("myScript.js", Url)

Also please learn how to debug your javascript code. Use a tool such as FireBug or Chrome developer toolbar where all those errors will be shown.