Databases
StackOverflow2013
Postsdbo
POPost data to MVC3 controller without pagerefresh
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPost data to MVC3 controller without pagerefresh
    text
    copied!<p>I have this script that basically has 4 select boxes, what I want is that for the 2 top select boxes, he submits the optionvalue that is selected to an action (which can be found at "ProductKoppeling/ProductKoppelingPartial"), I want to let him submit this data when I click on an option but without page refresh.</p> <p>I tried JSON and I tried Ajax, but I didn't get it working.. How should i do this?</p> <p><strong>Script:</strong></p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; 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(); } } &lt;/script&gt; </code></pre> <p><strong>CSHTML:</strong></p> <pre><code>&lt;div style="width: 500px; float: left;"&gt; @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()" }) } &lt;div style="clear: both"&gt;&lt;/div&gt; &lt;div style="float: left;"&gt; &lt;b&gt;Hoofdgroepen&lt;/b&gt;&lt;br /&gt; @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "hpg_submit" })) { if (ViewBag.SelectedKlant != null) { &lt;input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" /&gt; } &lt;select style="width: 200px;" size="6" id="HoofdProductGroep" name="HoofdProductGroep.Id" onchange="document.getElementById('hpg_submit').submit();"&gt; @foreach (var hpg in ViewBag.HoofdProductGroep) { if (ViewBag.SelectedHPG != null) { if (hpg.Id == ViewBag.SelectedHPG.Id) { &lt;option value="@hpg.Id" selected="selected"&gt;@hpg.Naam&lt;/option&gt; } else { &lt;option value="@hpg.Id"&gt;@hpg.Naam&lt;/option&gt; } } else { &lt;option value="@hpg.Id"&gt;@hpg.Naam&lt;/option&gt; } } &lt;/select&gt; &lt;input type="hidden" name="Actie" id="Actie_1" value="0" /&gt; &lt;br /&gt; &lt;img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_1').value='1';document.getElementById('hpg_submit').submit();" /&gt; &lt;img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_1').value='2';document.getElementById('hpg_submit').submit();" /&gt; &lt;img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_1()" /&gt; } &lt;/div&gt; &lt;div style="float: right;"&gt; &lt;b&gt;Groepen&lt;/b&gt;&lt;br /&gt; @using (Html.BeginForm("ProductKoppelingPartial", "ProductKoppeling", FormMethod.Post, new { id = "pg_submit" })) { if (ViewBag.SelectedHPG != null) { &lt;input type="hidden" name="HoofdProductGroep.Id" value="@ViewBag.SelectedHPG.Id" /&gt; } if (ViewBag.SelectedKlant != null) { &lt;input type="hidden" name="Klant.Id" value="@ViewBag.SelectedKlant.Id" /&gt; } &lt;select size="6" style="width: 200px;" id="ProductGroep_Id" name="ProductGroep.Id" onchange="document.getElementById('pg_submit').submit();"&gt; @foreach (var pg in ViewBag.ProductGroep) { if (ViewBag.SelectedPG != null) { if (pg.Id == ViewBag.SelectedPG.Id) { &lt;option value="@pg.Id" selected="selected"&gt;@pg.Naam&lt;/option&gt; } else { &lt;option value="@pg.Id"&gt;@pg.Naam&lt;/option&gt; } } else { &lt;option value="@pg.Id"&gt;@pg.Naam&lt;/option&gt; } } &lt;/select&gt; &lt;input type="hidden" name="Actie" id="Actie_2" value="0" /&gt; &lt;br /&gt; &lt;img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_2').value='3';document.getElementById('pg_submit').submit();" /&gt; &lt;img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_2').value='4';document.getElementById('pg_submit').submit();" /&gt; &lt;img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_2()" /&gt; } &lt;/div&gt; &lt;div style="clear: both; height: 25px;"&gt;&lt;/div&gt; @using (Html.BeginForm("Save", "ProductKoppeling", FormMethod.Post, new { id = "p_submit" })) { &lt;div style="float: left"&gt; &lt;b&gt;Producten&lt;/b&gt;&lt;br /&gt; &lt;select size="18" style="width: 200px;" name="Product.Id"&gt; @foreach (var p in ViewBag.Product) { &lt;option value="@p.Id"&gt;@p.Naam&lt;/option&gt; } &lt;/select&gt; @if (ViewBag.SelectedPG != null) { if (ViewBag.SelectedPG.Id != null) { &lt;input type="hidden" name="ProductGroep.Id" value="@ViewBag.SelectedPG.Id" /&gt; } } &lt;input type="hidden" name="Actie" id="Actie_3" value="0" /&gt; &lt;br /&gt; &lt;img src="../../Content/toevoegen.png" style="cursor: pointer; width: 30px;" onclick="document.getElementById('Actie_3').value='1';document.getElementById('p_submit').submit();" /&gt; &lt;img src="../../Content/bewerken.png" style="cursor: pointer; float: none; width: 30px;" onclick="document.getElementById('Actie_3').value='2';document.getElementById('p_submit').submit();" /&gt; &lt;img src="../../Content/verwijderen.png" style="cursor: pointer; float: none; width: 30px;" onclick="delete_3()" /&gt; &lt;br /&gt; &lt;/div&gt; &lt;div style="float: left; width: 100px;"&gt; &lt;center&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('p_submit').submit();"&gt;»&lt;/a&gt; &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;a style="cursor: pointer; float: none; color: blue; font-size: 30px;" onclick="document.getElementById('pgp_submit').submit();"&gt;«&lt;/a&gt; &lt;/center&gt; &lt;/div&gt; } &lt;div style="float: right;"&gt; &lt;b&gt;Producten in groepen&lt;/b&gt;&lt;br /&gt; @using (Html.BeginForm("Delete", "ProductKoppeling", FormMethod.Post, new { id = "pgp_submit" })) { &lt;select size="18" style="width: 200px;" name="ProductGroepProduct.Id"&gt; @foreach (var pgp in ViewBag.ProductGroepProduct) { if (pgp != null) { if (pgp.Product != null) { &lt;option value="@pgp.Id"&gt;@pgp.Product.Naam&lt;/option&gt; } } } &lt;/select&gt; } &lt;/div&gt; </code></pre> <p></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload