将数据发布到 MVC 3 控制器而不刷新页面答案

【问题标题】：Post data to MVC3 controller without pagerefresh将数据发布到 MVC 3 控制器而不刷新页面
【发布时间】：2012-05-31 23:32:05
【问题描述】：

我有这个基本上有 4 个选择框的脚本，我想要的是对于 2 个顶部选择框，他将选择的选项值提交给一个动作（可以在“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>

【问题讨论】：

可以使用 jQuery ajax 吗？

标签： c# html json asp.net-mvc-3 post

【解决方案1】：

您正在使用 Html 表单。

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

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

创建一个类似的控制器：

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

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

根据要求：

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

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

return false 会阻止刷新。

按照this 指南获取完整教程。

【讨论】：

刷新是因为您使用的是 HTML 表单。请改用 ajax 表单或上述方法。
嗯，你是对的，这有点合乎逻辑。谢谢！打算试试看。
使用了这样的表单，但也让我回到了一个黑页.. @using (Ajax.BeginForm("Delete", "ProductKoppeling", new AjaxOptions() { HttpMethod = "post", }, 新的 { id = "pgp_submit" })){ formdata }
从 ajax 表单返回 false，因此页面不会刷新。
现在在脚本部分得到了这个。 function () { $.ajax({ type: "POST", url: "ProductKoppeling/Delete", success: function () { } });返回假； }

【解决方案2】：

也许您应该使用 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>

【讨论】：