按钮单击MVC后的部分加载

时间:2011-12-25 12:42:13

标签: c# javascript jquery ajax asp.net-mvc

我有一个页面,我正在显示笔记,点击一个按钮后,我希望能够添加一个笔记。以下代码是我尝试加载创建注释操作结果的部分。

<script type="text/javascript">
    (function() {
    $('#load-partial'.click(function(){
        $('#partial'.load('/EntityController/CreateNote/');});
    })();    
</script>

<div id="partial"></div>
<button type="button" id="load-partial" />

但是,单击该按钮不会执行任何操作。这里出了什么问题?

2 个答案:

答案 0 :(得分:1)

  

这里出了什么问题?

对于初学者来说,你所展示的内容中有很多javascript错误。在订阅诸如click之类的事件之前,也没有等待DOM准备就绪。您刚刚创建了一个匿名函数,您可以立即执行该函数,而无需等待DOM准备就绪。它应该是这样的:

<script type="text/javascript">
    $(function() {
        $('#load-partial').click(function() {
            $('#partial').load('@Url.Action("CreateNote", "Entity")');
        });
    });    
</script>

<div id="partial"></div>
<button type="button" id="load-partial" />

除此之外,可能会有类似的事情可能会出错(很遗憾,我们不能排除您提供的可怜的代码段):

  • 您忘了引用jquery
  • 您在显示的脚本
  • 后引用了jquery
  • 您引用了jquery但提供了错误的网址
  • 应该返回部分的控制器操作不存在
  • 应该返回部分的控制器操作会抛出异常
  • 应该返回partial的控制器操作不会抛出异常,但是在搜索的(按惯例)位置找不到局部视图
  • 应该返回部分的控制器操作不会抛出异常并且它会找到部分但是这部分中存在错误(错误的语法,空引用异常,...此列表也会变为无穷大)< / LI>
  • 在为操作生成url时,您没有使用url helper,因此如果您在虚拟目录中部署此应用程序,/EntityController/CreateNote/ url可能是错误的。您需要使用网址助手:$('#partial').load('@Url.Action("CreateNote", "Entity")');
  • 您使用/EntityController作为控制器名称,但根据约定,Controller后缀仅在命名控制器类时使用,但在引用URL时不使用。因此,网址可能应为/entity/createnote(请参阅以前生成网址的正确方法)。
  • 您在未显示的部分页面中有一些javascript错误。使用诸如FireBug之类的javascript调试工具来调试脚本和AJAX请求。
  • ...此列表继续无限

答案 1 :(得分:1)

Darin Dimitrov的非常好的建议。进入下一个级别

  
    

您需要使用网址助手:$('#partial')。load('@ Url.Action(“CreateNote”,“Entity”)');

  

要使此不引人注目(并将java脚本移动到文件中),您需要使用@URL帮助程序设置操作属性/值,然后在JavaScript中获取操作属性值。在我的待定DropDownList教程中,我执行以下操作:

     @using (Html.BeginForm("IndexDDL", "Home", FormMethod.Post, 
new { id = "CountryStateFormID",
 StateListAction = @Url.Action("StateList") })) {

- 然后在JavaScript中

$('#CountriesID').change(function () {
    var CountryStateFormID = $('#CountryStateFormID');
    $.getJSON(CountryStateFormID.attr('StateListAction') + '/' + $('#CountriesID').val(), function (data) {

您还应该使用IE9 / F12开发人员工具或Chrome或FF来调试代码。