部分查看方法仅在按钮点击

时间:2017-06-28 04:03:15

标签: javascript jquery ajax asp.net-mvc

我有一个评论表单,可以生成一组问题和一组答案选项,并能够在您点击adhoc按钮时生成新的adhoc问题。

adhoc是一个局部视图,附加在其正下方的主视图中。当我单击按钮生成特殊问题时,会出现特殊部分视图。

我可以输入我的问题并选择一个电台应答选项。当我再次单击adhoc按钮时,表单会出现,但是当我尝试为第二个adhoc问题选择答案时,它会删除我为第一个adhoc问题选择的答案!

我在PartialViewResults Adhoc()上设置了一个断点,我注意到在第一个adhoc按钮单击时,Adhoc()执行。该方法执行并向局部视图提供id。在第二个按钮单击时,该方法不会执行。它附加到主视图,其id与第一个adhoc局部视图相同。

我似乎无法弄清楚如何在每次点击按钮时执行该方法。以下链接包含代码/ html。

$(function () {

    $('.btnAdhoc').click(function (event) {
        event.preventDefault();

        $.ajax({
            url: '/ProjectManagers/Forms/Adhoc',
            //data: JSON.stringify(model),
            type: 'get',
            success: function (result) {
                $('#adhoc').append(result);
            }
        });
    });
});

更新1

以下链接到我之前的问题包含所有HTML / CODE

How to pass Model from View to Controller, add items to list, pass back to view

更新2

重新提出我的问题,我希望这可以解决这个问题。

更新3

似乎是与Internet Explorer相关的问题。它适用于chrome,但我需要在IE中使用它。

更新3:已修复

通过在函数脚本中添加cache:false来解决。

1 个答案:

答案 0 :(得分:1)

请尝试这个例子,并记下我的评论。

查看:

@model Testy20161006.Controllers.ViewModel
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexValid8</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnClick").click(function () {
                var PassDDLView = { ddlValue: $("#passThis").val() };
                //took out your preventDefault
                //your url should be /Controller/Action, so I am doint this
                $.ajax({
                    url: '/Home/AdHoc',
                    type: 'GET',
                    data: PassDDLView,
                    success: function (result) {
                        alert(result.Component);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });
            })
        })
    </script>
</head>
<body>
    <div class="form-group">
        @Html.DropDownListFor(m => m.ComponentId,
                         new SelectList(Model.ComponentList, "Value", "Text"), new { id = "passThis" })
        <input type="button" id="btnClick" value="submitToAjax" />
    </div>
</body>
</html>

控制器/的ViewModels:

//You can put this in a model folder
public class ViewModel
{
    public ViewModel()
    {
        ComponentList = new List<SelectListItem>();
        SelectListItem sli = new SelectListItem { Text = "component1", Value = "1" };
        SelectListItem sli2 = new SelectListItem { Text = "component2", Value = "2" };
        ComponentList.Add(sli);
        ComponentList.Add(sli2);
    }

    public List<SelectListItem> ComponentList { get; set; }
    public int ComponentId { get; set; }
}

public class PassDDLView
{
    public string ddlValue { get; set; }
}

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult AdHoc(PassDDLView passDDLView)
    {
        //put a breakpoint here to see the ddl value in passDDLView
        ViewModel vm = new ViewModel();
        return Json(new
        {
            Component = "AComponent"
        }
        , JsonRequestBehavior.AllowGet);
    }

    public ActionResult IndexValid8()
    {
        ViewModel vm = new ViewModel();
        return View(vm);
    }