JQUERY通过ajax将值从MVC视图传递到控制器

Question

JQUERY通过ajax将值从MVC视图传递到控制器

jqueryajaxasp.net-mvcmodel-view-controller

36

我想做的是从视图（使用jquery / ajax）将txtComments的值传递给控制器。

问题是ajax / jquery不接受脚本标记作为字符串。也就是说，当我在txtComments中输入任何脚本/ html标记时，ajax会进入错误函数而无法进入控制器。

以下是jQuery代码：

        $('#btnSaveComments').click(function () {
            var comments = $('#txtComments').val();
            var selectedId = $('#hdnSelectedId').val();

            $.ajax({
                url: '<%: Url.Action("SaveComments")%>?id=' + selectedId + '&comments=' + escape(comments),
                type: "post",
                cache: false,
                success: function (savingStatus) {
                    $("#hdnOrigComments").val($('#txtComments').val());
                    $('#lblCommentsNotification').text(savingStatus);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('#lblCommentsNotification').text("Error encountered while saving the comments.");
                }
            });
        });

这是控制器：

        [HttpPost]
        public ActionResult SaveComments(int id, string comments){
             var actions = new Actions(User.Identity.Name);
             var status = actions.SaveComments(id, comments);
             return Content(status);
        }

我也尝试过使用$('#txtComments').serialize()代替escape(comments)，但结果还是一样。

- cjBognot

我也遇到了同样的问题！你是怎么解决的？ - moji

6个回答

9

这里有一种替代的方法来执行同样的调用。请确保您的类型始终大写，例如：type:"GET" / type:"POST"。

$.ajax({
      url:/ControllerName/ActionName,
      data: "id=" + Id + "&param2=" + param2,
      type: "GET",
      success: function(data){
            // code here
      },
      error: function(passParams){
           // code here
      }
});

另一个选择是在链接上使用data-ajax。

<a href="/ControllerName/ActionName/" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#_content">Click Me!</a>

假设您有一个ID为_content的div，这将调用操作并使用从该操作返回的数据替换该div内部的内容。

<div id="_content"></div>

虽然这并不是直接回答您问题的答案，但这是一些您应该了解的信息。;)

- Theron Govender

4

$('#btnSaveComments').click(function () {
    var comments = $('#txtComments').val();
    var selectedId = $('#hdnSelectedId').val();

    $.ajax({
        url: '<%: Url.Action("SaveComments")%>',
        data: { 'id' : selectedId, 'comments' : comments },
        type: "post",
        cache: false,
        success: function (savingStatu`enter code here`s) {
            $("#hdnOrigComments").val($('#txtComments').val());
            $('#lblCommentsNotification').text(savingStatus);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $('#lblCommentsNotification').text("Error encountered while saving the comments.");
        }
    });
});

- Sangam Naidu

2

View Data
==============


 @model IEnumerable<DemoApp.Models.BankInfo>
<p>
    <b>Search Results</b>
</p>
@if (!Model.Any())
{
    <tr>
        <td colspan="4" style="text-align:center">
            No Bank(s) found
        </td>
    </tr>
}
else
{
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Postcode)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Postcode)
                </td>
                <td>
                    <input type="button" class="btn btn-default bankdetails" value="Select" data-id="@item.Id" />
                </td>
            </tr>
        }
    </table>
}


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnSearch").off("click.search").on("click.search", function () {
            if ($("#SearchBy").val() != '') {
                $.ajax({
                    url: '/home/searchByName',
                    data: { 'name': $("#SearchBy").val() },
                    dataType: 'html',
                    success: function (data) {
                        $('#dvBanks').html(data);
                    }
                });
            }
            else {
                alert('Please enter Bank Name');
            }
        });
}
});


public ActionResult SearchByName(string name)
        {
            var banks = GetBanksInfo();
            var filteredBanks = banks.Where(x => x.Name.ToLower().Contains(name.ToLower())).ToList();
            return PartialView("_banks", filteredBanks);
        }

        /// <summary>
        /// Get List of Banks Basically it should get from Database 
        /// </summary>
        /// <returns></returns>
        private List<BankInfo> GetBanksInfo()
        {
            return new List<BankInfo>
            {
                new BankInfo {Id = 1, Name = "Bank of America", Address = "1438 Potomoc Avenue, Pittsburge", Postcode = "PA 15220"  },
                new BankInfo {Id = 2, Name = "Bank of America", Address = "643 River Hwy, Mooresville", Postcode = "NC 28117"  },
                new BankInfo {Id = 3, Name = "Bank of Barroda", Address = "643 Hyderabad", Postcode = "500061"  },
                new BankInfo {Id = 4, Name = "State Bank of India", Address = "AsRao Nagar", Postcode = "500061"  },
                new BankInfo {Id = 5, Name = "ICICI", Address = "AsRao Nagar", Postcode = "500061"  }
            };
        }

- Sandeep

3

希望您能在答案中添加一些评论，这会很不错！ - Felipe Oriani

1

我不想开另一个帖子，所以我会在这里发布我的问题。

Ajax无法将值传递给控制器，我只是找不到错误:(

-JS

<script>
        $(document).ready(function () {
            $("#sMarka").change(function () {
                var markaId = $(this).val();
                alert(markaId);
                debugger
                $.ajax({
                    type:"POST",
                    url:"@Url.Action("VratiModele")",
                    dataType: "html",
                    data: { "markaId": markaId },
                    success: function (model) {
                        debugger
                        $("#sModel").empty();
                        $("#sModel").append(model);
                    }
                });
            });
        });
    </script>

--控制器

public IActionResult VratiModele(int markaId = 0)
        {
            if (markaId != 0)
            {
                List<Model> listaModela = db.Modeli.Where(m => m.MarkaId == markaId).ToList();
                ViewBag.ModelVozila = new SelectList(listaModela, "ModelId", "Naziv");
            }
            else
            {
                ViewBag.Greska = markaId.ToString();
            }

            return PartialView();
        }

- Insane Shadow

嗨，请确保解释您的代码是做什么的/如何回答问题等。仅有一个代码片段可能不足以为所有用户提供足够的信息！ :) - Burkely91

抱歉，这个应用程序应该包含两个选择标签。当你从第一个选择标签中选择类似于"Audi"的内容时，第二个标签应该会展示Audi的车型。 - Insane Shadow

类似这样的情况，我尝试使用他的代码，但它没有起作用。 - Insane Shadow

你可以编辑你的答案，而不是添加评论。 - Burkely91

0

[HttpPost]
public ActionResult SaveComments(int id, string comments){
     var actions = new Actions(User.Identity.Name);
     var status = actions.SaveComments(id, comments);
     return Content(status);
}

- Balaram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tobias86 · Accepted Answer

尝试使用$.ajax函数的data选项。更多信息请参见这里。

$('#btnSaveComments').click(function () {
    var comments = $('#txtComments').val();
    var selectedId = $('#hdnSelectedId').val();

    $.ajax({
        url: '<%: Url.Action("SaveComments")%>',
        data: { 'id' : selectedId, 'comments' : comments },
        type: "post",
        cache: false,
        success: function (savingStatus) {
            $("#hdnOrigComments").val($('#txtComments').val());
            $('#lblCommentsNotification').text(savingStatus);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $('#lblCommentsNotification').text("Error encountered while saving the comments.");
        }
    });
});