Question

我有这个脚本基本上有4个选择框，我想要的是对于2个顶部选择框，他提交选择的动作的选项值（可以在“ProductKoppeling / ProductKoppelingPartial”找到），I我想点击选项但没有刷新页面时让他提交这些数据。

我尝试了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)
{
    ...
}

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

如要求：

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

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

返回false会阻止刷新。

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

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

将数据发布到没有pagerefresh的MVC3控制器

2 个答案: