Question

I have a table with a Ajax.BeginForm on each row. This works good to pass the data to the controller.

However, it wont fire the Request.IsAjaxRequest() on the controller because of the form post(thanx HTX9 for pointing that out!). The real problem is that it returns a partial view instead of updating it in the current view.

Below you can see two fieldsets. The first is the one i want to update and the one below it is the one which sends data to the controller with the Ajax.BeginForm.

With other words: When I choose something in a dropdownlist it updates the table above but it opens it in a new partial view.

I have the unobtrusive ajax js in the _layout view and a similar setup works in an other part of the application from with a post data with a button instead.

<fieldset>
    <legend>Direktbyten</legend>
    <div id="container-grid2">
        @Html.Partial("_RatingList2", Model.Models2)
    </div>
</fieldset>

<fieldset>
    <legend>Omarkerade byten(@ViewBag.DirectCount)</legend>

    <div id="RatingList">
    <table>
        <thead>
            <tr>
                <td>Se hela</td>
                <td>Hyra</td>
                <td>Rum</td>
                <td>Kvm</td>
                <td>Gata</td>
                <td>Område</td>
                <td>Deras prio</td>
                <td>Totaltvärde</td>
                <td>Min prio</td>
            </tr>

        </thead>
        <tbody>
            @foreach (var item in Model.Models1)
            {
                using (Ajax.BeginForm("UpdateRatingListRow", new AjaxOptions { UpdateTargetId = "container-grid2" }))
                { 

                @Html.Hidden("RatingListId", item.RatingListId)
                <tr>
                    <td>@Html.ActionLink("Till annons", "ViewAd", "Ad", new { id = item.CustomerId }, null)
                    </td>
                    <td>@item.Rent</td>
                    <td>@item.Rooms</td>
                    <td>@item.SquareMeters</td>
                    <td>@item.Street</td>
                    <td>@item.Area</td>
                    <td>@item.TheirRating</td>
                    <td>@item.TotalRating</td>
                    <td>
                     @Html.Raw("<div id='" + item.RatingListId + "'>")
                        <select name="SelectedValue" onchange="this.form.submit();">
                            <option value="0"@if (item.MyRating == "00")
                                             {
                                                 @Html.Raw("selected")
                                             }>Ny</option>
                            <option value="10" @if (item.MyRating == "10")
                                               {
                                                   @Html.Raw("selected")
                                               }>Inget intresse</option>
                            <option value="50"@if (item.MyRating == "50")
                                              {
                                                  @Html.Raw("selected")
                                              }>Svagt intressse</option>
                            <option value="60"@if (item.MyRating == "60")
                                              {
                                                  @Html.Raw("selected")
                                              }>Litet intresse-vill ej ha kontakt</option>
                            <option value="70"@if (item.MyRating == "70")
                                              {
                                                  @Html.Raw("selected")
                                              }>Intresserad-Vill ha kontakt</option>
                            <option value="80"@if (item.MyRating == "80")
                                              {
                                                  @Html.Raw("selected")
                                              }>Varit på visning-Vill gå vidare</option>
                            <option value="90"@if (item.MyRating == "90")
                                              {
                                                  @Html.Raw("selected")
                                              }>Intresserad-Vill ha kontakt</option>
                            <option value="100"@if (item.MyRating == "100")
                                               {
                                                   @Html.Raw("selected")
                                               }>Avvaktar värdar</option>
                        </select>@item.MyRating
                        @Html.Raw("</div>")
                    </td>
                </tr>
                }
            }
        </tbody>
    </table>
</div>

</fieldset>

Here is the Controller:

[HttpPost]
public ActionResult UpdateRatingListRow()
{
   if (Request.IsAjaxRequest())
   {
       //Do stuff, it does not hit this part because of the isAjaxRequest().
       return this.PartialView("_RatingList2", myRatingListMarked);
   }
   return this.PartialView("_RatingList2", null);
}

Generated Html:

Answer 1

Here is my “fulhack”(ugly hack in swedish), added a button with each row id and then i call it for submit. Still hoping for a clean solution without having to rewrite a lot of code.

using (Ajax.BeginForm("UpdateRatingListRow", new AjaxOptions { UpdateTargetId = "container-grid2", OnSuccess = "OnSuccess('" + item.RatingListId + "')" }))
{ 
   <input type="submit" id="@item.RatingListId" style="position: absolute; top: -1000px">
   @Html.Hidden("RatingListId", item.RatingListId)
   <tr>
      <td>@Html.ActionLink("Till annons", "ViewAd", "Ad", new { id = item.CustomerId }, null)</td>
      <td>@item.Rent</td>
      <td>@item.Rooms</td>
      <td>@item.SquareMeters</td>
      <td>@item.Street</td>
      <td>@item.Area</td>
      <td>@item.TheirRating</td>
      <td>@item.TotalRating</td>
      <td>@Html.Raw("<div id='" + item.RatingListId + "'>")
        <select name="SelectedValue" onchange="document.getElementById(@item.RatingListId).click();">
          <option value="0"@if (item.MyRating == "00")