C# 在不刷新页面的情况下将数据发布到MVC3控制器

我有一个脚本，它基本上有4个选择框，我想要的是，对于前两个选择框，他将所选的optionvalue提交给一个操作（可以在“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>

<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>

函数delete_1（）{
var应答=确认（“您是否愿意继续购买产品？”
若有(答复){
document.getElementById（'Actie_1'）。值='5'；
document.getElementById（'hpg_submit'）.submit（）；
}
}
函数delete_2（）{
var应答=确认（“您是否愿意继续购买产品？”
若有(答复){
document.getElementById（'Actie_2'）。值='6'；
document.getElementById（'pg_submit'）.submit（）；
}
}
函数delete_3（）{
var应答=确认（“您是否愿意继续购买产品？”
若有(答复){
document.getElementById（'Actie_3'）。值='6'；
document.getElementById（'p_submit'）.submit（）；
}
}

CSHTML:

<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>

<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>

@使用（Html.BeginForm（“ProductKoppelingPartial”，“ProductKoppeling”，FormMethod.Post，new{id=“onload_submit”}））
{
@DropDownList（“Klant.Id”，（ViewBag.Klant作为SelectList），new{onchange=“document.getElementById（'onload_submit'）.submit（）”）
}
胡夫德格罗彭

@使用（Html.BeginForm（“ProductKoppelingPartial”，“ProductKoppeling”，FormMethod.Post，new{id=“hpg_submit”}））
{
如果（ViewBag.SelectedKlant！=null）
{
}
@foreach（ViewBag.HoofdProductGroep中的变量hpg）
{
如果（ViewBag.SelectedHPG！=null）
{
如果（hpg.Id==ViewBag.SelectedHPG.Id）
{
@hpg.Naam
}
其他的
{
@hpg.Naam
}
}
其他的
{
@hpg.Naam
}
}


}
格罗本

@使用（Html.BeginForm（“ProductKoppelingPartial”，“ProductKoppeling”，FormMethod.Post，new{id=“pg_submit”}））
{
如果（ViewBag.SelectedHPG！=null）
{
}
如果（ViewBag.SelectedKlant！=null）
{
}
@foreach（ViewBag.ProductGroep中的var pg）
{
如果（ViewBag.SelectedPG！=null）
{
如果（pg.Id==ViewBag.SelectedPG.Id）
{
@纳姆少校
}
其他的
{
@纳姆少校
}
}
其他的
{
@纳姆少校
}
}


}
@使用（Html.BeginForm（“Save”，“ProductKoppeling”，FormMethod.Post，new{id=“p_submit”}））
{
Producten

@foreach（ViewBag.Product中的var p）
{
@p、 纳姆
}
@如果（ViewBag.SelectedPG！=null）
{
如果（ViewBag.SelectedPG.Id！=null）
{
}
}










»













«
}
groepen的产品

@使用（Html.BeginForm（“Delete”，“ProductKoppeling”，FormMethod.Post，new{id=“pgp_submit”}））
{
@foreach（ViewBag.ProductGroepProduct中的var pgp）
{
如果（pgp！=null）
{
如果（pgp.Product！=null）
{
@pgp.Product.Naam
}
}
}
}

---

您正在使用Html表单

默认情况下，这会导致刷新

使用ajax表单或根本不使用表单，只调用一个操作，但不返回操作结果

创建类似于以下内容的控制器：

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

当您从视图调用它时，它将在服务器端执行代码，而不会对客户端造成任何影响

应要求：

添加了非刷新Ajax表单示例：

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

返回false将阻止刷新

---

请按照指南阅读完整教程。

也许您应该使用Ajax调用。。。然后选择要刷新的div：下面是一个简短的示例：

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

在ajax调用中：

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

@使用（Ajax.BeginForm（“文本”、“动作”、“可选的”Cotroller”、ajaxOptions））
{}

---

刷新是因为您使用的是HTML表单。使用ajax表单或上面的方法。嗯，你是对的，这是合乎逻辑的。谢谢我要试试。使用了这样的表单，但也会让我返回到一个黑色页面@使用（Ajax.BeginForm（“Delete”，“ProductKoppeling”，new AjaxOptions（）{HttpMethod=“post”，}，new{id=“pgp_submit”}））{formdata}从Ajax表单返回false，这样页面就不会刷新。现在在脚本部分得到了这个结果。函数（）{$.ajax（{type:“POST”，url:“ProductKoppeling/Delete”，success:function（）{}）；返回false；}jQuery-ajax是否可以使用？