CODEWITHSUNDEEP
javascriptajaxasp.net-mvcrazorunobtrusive-javascript
Patrick
Patrick

Reputation: 2781

Ajax.ActionLink created from Ajax.BeginForm in a RenderPartial View

I would like to confirm if this limitation is by design or if I'm doing something wrong:

I have a View with two RenderPartials:

@model Heelp.ViewModels.CompanyIndexViewModel

@{ Html.RenderPartial(MVC.Company.Views.IndexSearch, Model.SearchViewModel); }
@{ Html.RenderPartial(MVC.Company.Views.IndexMap, Model.MapViewModel); }

In the first Partial View I have an Ajax.BeginForm:

@model Heelp.ViewModels.CompanyIndexSearchViewModel

@using (Ajax.BeginForm(MVC.Company.CategoryGetAllBySearch(), new AjaxOptions { UpdateTargetId = "searchCompanyResults", InsertionMode = InsertionMode.Replace }, new { @id = "searchBoxWrap" }))
{
  @Html.AntiForgeryToken()

  @Html.HiddenFor(m => m.IsCenterFromUser)
  @Html.HiddenFor(m => m.CenterLat)
  @Html.HiddenFor(m => m.CenterLng)
  @Html.HiddenFor(m => m.Zoom)
  @Html.HiddenFor(m => m.SearchRadius)

  @Html.TextBoxFor(m => m.Search, new { @placeholder = @HeelpResources.CompanyIndexViewSearchPlaceholder })
  <input type="button" value="«" id="clearKeywords"/>
  @Html.TextBoxFor(m => m.Location, new { @placeholder =   @HeelpResources.CompanyIndexViewLocationPlaceholder })
  <input type="button" value="«" id="clearLocation"/>
  <input type="button" value="X" id="hereButton"/>
  <input type="submit" value="@HeelpResources.CompanyIndexViewSearchButtonLabel"/>
}
<div id="searchCompanyResults" class="clearfix" style="z-index: 10; position: absolute; width: 400px;"></div>

The Ajax.BeginForm generates a PartialView in the searchCompanyResults div with a list of Ajax.ActionLink's:

   @model Heelp.ViewModels.CategoryGetAllBySearchListViewModel

<p class="float-left margin-top align-left"><span>Encontrámos <em><a href="#">@Model.TotalSearchCount</a></em> resultados nas categorias:</span></p>
<div class="clear-both">
    <div id="searchResultsList" class="float-left">
        <ul>
            @foreach (var item in Model.CategoryGetAllBySearch)
            {
                <li>
                    @Ajax.ActionLink(
                        String.Format("{0} {1} ver »", item.SearchCount, item.Name), 
                        MVC.Company.GetAllByCategory(item.Id, Model.Search, Model.Location, Model.IsCenterFromUser, Model.CenterLat, Model.CenterLng, Model.SearchRadius), 
                        new AjaxOptions { OnBegin = "CompanyGetAllByCategoryOnBegin(" + item.Id + ")", OnSuccess = "CompanyGetAllByCategoryOnSuccess" })
                </li>
            }        
        </ul>
    </div>
</div>

The problem here is that, if I don't include a link to "< script src="~/Scripts/jquery.unobtrusive-ajax.min.js" >" in the PartialView the Action.Link returns the Json text.

EDIT: One I detected is that when I click the Action.Link, the submit is made 2 times the first time, and 4 the second, and on and on growing, why? Do I have to do this?

Upvotes: 0

Views: 1011

Answers (1)

Sławomir Rosiek
Sławomir Rosiek

Reputation: 4073

If you want use Ajax.BeginForm, Ajax.ActionLink and others from Ajax you should include jquery.unobtrusive-ajax.js file in your layout. It contains code that intercept click on link and submit of the form by cancel action and make it over AJAX.

You don't need include that file in partial views twice.

Upvotes: 0

Related Questions