AJAX调用MVC中的OnChange事件

我必须对属于视图一部分的下拉列表的onchange事件进行AJAX调用。在更改事件中，我需要调用数据库，执行一些计算来显示UI，然后使用计算来填充图表控件。用户界面显示按此顺序排列。图表下拉类别列表评级分数的子类别列表因此，您需要在变更事件中显示div3中的类别评分，请使用评分分数填充图表。在.NET中轻松完成，但如何在MVC ??我能想到的唯一选择是创建带有代码的用户控件，但这违背了使用MVC的目的。任何帮助表示赞赏。AJAX调用MVC中的OnChange事件

来源

2010-11-02 user494820

使用局部视图进行调查。还有，如果你谷歌ASP.Net MVC局部视图环节多，但这里是一个我发现intestering

http://blog.stevensanderson.com/2008/10/14/partial-requests-in-aspnet-mvc/

来源

2010-11-02 14:19:12

我不知道我完全理解你想要做什么，但在MVC方式我可能会处理它是将几个AJAX调用链接在一起。第一个基于选择更新类别评级。这可能会返回JSON，以便您可以轻松提取收视率分数。第二个参数取第一个返回的评分值，并调用一个将图表呈现为HTML的操作 - 即它呈现一个返回并插入到文档正确位置的局部视图。

来源

2010-11-02 14:22:10 tvanfosson

下面是你如何实现这一点的一般想法。

<script type="text/javascript"> 
    // assuming you're using jQuery 
    $("#ddlAjax").change(function (event) { 
     $.ajax({ 
      url: "Controller/GetPartialGraph/" + $(this).val(), 
      data: { id = $(this).val() /* add other additional parameters */ }, 
      cache: false, 
      type: "POST", 
      dataType: "html", 

      success: function (data, textStatus, XMLHttpRequest) { 
       $("#divPartialView").html(data); // HTML DOM replace 
      } 
     }); 
    }); 
</script> 

<select id="ddlAjax"> 
    ... list of options 
</select> 


<div id="divPartialView"> 
    <!-- something like this in your ASP.NET View --> 
    <%= Html.RenderPartial("MyPartialView", Model) %> 
</div>

这是您的控制器操作方法。

[HttpPost] 
public PartialViewResult GetPartialGraph(int id /* drop down value */) 
{ 
    // do calculations whatever you need to do 
    // instantiate Model object 
    var model = myBusinessLogicService.DoCalculations(id); 

    return PartialView("MyPartialView", model); 
}

我认为这是您正在寻找的答案。

来源

2010-11-04 18:55:51 stun

对于我来说它的工作原理，但我不得不仅将“data：{id = $（this）.val（）}”更改为“data：{id：$（this）.val（）” - 注意：“=”替换为“：”。谢谢。 – paweln66 2016-01-08 22:17:39

好吧，如果你想IA的方式来调用onchange事件时，下拉列表改变这会有所帮助：

@Html.DropDownListFor(
         model => model.SelectedId, 
         new SelectList(ViewBag.Ids, "Id", "Name"), 
         "[All]", 
         new { onchange = "onChangeId();", @id ="municipalityDropDown" } 
         )

那么你可以有这样的JavaScript代码和你Ajax代码。这里是一个调用动作方法的jax代码的例子。

function onChangeId() { 
     jQuery.ajax({ 
      url: '@Url.Action("Action Method Name", "Controller Name")', 
      type: 'POST', 
      contentType: 'application/json', 
      data: JSON.stringify({ data: data2 }), 
      success: function (result) { } 
     }); 
    }

来源

2011-11-16 13:57:23 Jack1987

您似乎没有阅读过这个问题。他不问如何触发代码变化或发送ajax请求。 – 2011-11-17 02:24:02

是的，这是正确的 - 唯一的变化是更换：

onchange = “this.form.submit();”

有：

onchange = “$(this.form).submit();”

发现它在this后

来源

2016-04-28 18:55:19 orsini

AJAX调用MVC中的OnChange事件

回答

相关问题