Опубликовать данные в контроллере MVC3 без pagerefresh

Question

У меня есть этот скрипт, который имеет в основном 4 блока выбора, что я хочу, так это то, что для двух верхних блоков выбора он отправляет опционное значение, которое выбрано для действия (которое можно найти на " ProductKoppeling/ProductKoppelingPartial "), я хочу, чтобы он представил эти данные, когда я нажимаю на опцию, но без обновления страницы.

Я пробовал JSON, и я попробовал Ajax, но я не получил его работу. Как мне это сделать?

Сценарий:

<script language="javascript" type="text/javascript"> 
function delete_1() { 
    var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?") 
    if (answer) { 
     document.getElementById('Actie_1').value = '5'; 
     document.getElementById('hpg_submit').submit(); 
    } 
} 
function delete_2() { 
    var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?") 
    if (answer) { 
     document.getElementById('Actie_2').value = '6'; 
     document.getElementById('pg_submit').submit(); 
    } 
} 
function delete_3() { 
    var answer = confirm("U staat op het punt dit product te verwijderen, wilt u doorgaan?") 
    if (answer) { 
     document.getElementById('Actie_3').value = '6'; 
     document.getElementById('p_submit').submit(); 
    } 
} 
</script> 

CSHTML:

<div style="width: 500px; float: left;"> 
@using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "onload_submit" })) 
{ 
    @Html.DropDownList("Klant.Id", (ViewBag.Klant as SelectList), new { onchange = "document.getElementById('onload_submit').submit()" }) 
} 
<div style="clear: both"></div> 
<div style="float: left;"> 
    <b>Hoofdgroepen</b><br /> 
    @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "hpg_submit" })) 
    { 
     if (ViewBag.SelectedKlant != null) 
     { 
      <input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" /> 
     } 
     <select style="width: 200px;" size="6" id="HoofdProductGroep" name="HoofdProductGroep.Id" onchange="document.getElementById('hpg_submit').submit();"> 
      @foreach (var hpg in ViewBag.HoofdProductGroep) 
      { 
       if (ViewBag.SelectedHPG != null) 
       { 
        if (hpg.Id == ViewBag.SelectedHPG.Id) 
        { 
         <option value="@hpg.Id" selected="selected">@hpg.Naam</option> 
        } 
        else 
        { 
         <option value="@hpg.Id">@hpg.Naam</option> 
        } 
       } 
       else 
       { 
        <option value="@hpg.Id">@hpg.Naam</option> 
       } 
      } 
     </select> 
     <input type="hidden" name="Actie" id="Actie_1" value="0" /> 
     <br /> 
     <img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_1').value='1';document.getElementById('hpg_submit').submit();" /> 
     <img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_1').value='2';document.getElementById('hpg_submit').submit();" /> 
     <img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_1()" /> 
    } 
</div> 
<div style="float: right;"> 
    <b>Groepen</b><br /> 
    @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "pg_submit" })) 
    { 
     if (ViewBag.SelectedHPG != null) 
     { 
      <input type="hidden" name="HoofdProductGroep.Id" value="@ViewBag.SelectedHPG.Id" /> 
     } 
     if (ViewBag.SelectedKlant != null) 
     { 
      <input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" /> 
     } 
     <select size="6" style="width: 200px;" id="ProductGroep_Id" name="ProductGroep.Id" onchange="document.getElementById('pg_submit').submit();"> 
      @foreach (var pg in ViewBag.ProductGroep) 
      { 
       if (ViewBag.SelectedPG != null) 
       { 
        if (pg.Id == ViewBag.SelectedPG.Id) 
        { 
         <option value="@pg.Id" selected="selected">@pg.Naam</option> 
        } 
        else 
        { 
         <option value="@pg.Id">@pg.Naam</option> 
        } 
       } 
       else 
       { 
        <option value="@pg.Id">@pg.Naam</option> 
       } 
      } 
     </select> 
     <input type="hidden" name="Actie" id="Actie_2" value="0" /> 
     <br /> 
     <img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_2').value='3';document.getElementById('pg_submit').submit();" /> 
     <img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_2').value='4';document.getElementById('pg_submit').submit();" /> 
     <img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_2()" /> 
    } 
</div> 
<div style="clear: both; height: 25px;"></div> 
@using (Html.BeginForm("Save", "ProductKoppeling", FormMethod.Post, new { id = "p_submit" })) 
{ 
    <div style="float: left"> 
     <b>Producten</b><br /> 
     <select size="18" style="width: 200px;" name="Product.Id"> 
      @foreach (var p in ViewBag.Product) 
      { 
       <option value="@p.Id">@p.Naam</option> 
      } 
     </select> 
     @if (ViewBag.SelectedPG != null) 
     { 
      if (ViewBag.SelectedPG.Id != null) 
      { 
       <input type="hidden" name="ProductGroep.Id" value="@ViewBag.SelectedPG.Id" /> 
      } 
     } 
     <input type="hidden" name="Actie" id="Actie_3" value="0" /> 
     <br /> 
     <img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_3').value='1';document.getElementById('p_submit').submit();" /> 
     <img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_3').value='2';document.getElementById('p_submit').submit();" /> 
     <img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_3()" /> 
     <br /> 
    </div> 
    <div style="float: left; width: 100px;"> 
     <center> 
      <br /><br /><br /><br /> 
      <a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('p_submit').submit();">»</a> 
      <br /><br /><br /><br /><br /><br /><br /><br /><br /> 
      <a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('pgp_submit').submit();">«</a> 
     </center> 
    </div> 
} 
<div style="float: right;"> 
    <b>Producten in groepen</b><br /> 
    @using (Html.BeginForm("Delete", "ProductKoppeling", FormMethod.Post, new { id = "pgp_submit" })) 
    { 
     <select size="18" style="width: 200px;" name="ProductGroepProduct.Id"> 
      @foreach (var pgp in ViewBag.ProductGroepProduct) 
      { 
       if (pgp != null) 
       { 
        if (pgp.Product != null) 
        { 
         <option value="@pgp.Id">@pgp.Product.Naam</option> 
        } 
       } 
      } 
     </select> 
    } 
</div> 

Answer 1

Вы используете форму Html.

Это вызывает обновление по умолчанию.

Используйте форму ajax или не используйте формы вообще и просто вызывайте действие, но не возвращайте результат действия.

Создайте контроллер, аналогичный:

public void Action(String paramater) 
{ 
    ... 
} 

При вызове его с точки зрения он будет выполнять код на стороне сервера, не вызывая каких-либо эффектов на стороне клиента.

Как просил:

Добавлено Non обновления Ajax форма пример:

$.ajax({ 
    type: "POST", 
    url: "URL", 
    data: dataString, 
    success: function() { 
    ... 
    }; 
}); 
return false; 

Возвращение ложного предотвращает обновление.

this руководство для полного учебника.

Answer 2

Может быть, вы должны использовать Ajax звонки ... и выбрать DIV вы хотите обновить: вот короткий пример:

AjaxOptions ajaxOptions = new AjaxOptions 
{ 
    HttpMethod = "Post", 
    UpdateTargetId = "Mydiv", 
    OnSuccess = "aJqueryFunction" 
}; 

И в вашем АЯКС вызова:

<div id="Mydiv"> 
    @using (Ajax.BeginForm("text", "Action",(optional)"Cotroller", ajaxOptions)) 
{} 
</div>