在没有控制器的.Net MVC中使用$ .get()

时间:2013-08-12 17:24:19

标签: jquery asp.net-mvc asp.net-mvc-4

在.Net MVC中,如果我使用JQuery .get()方法从服务器获取文件,我还需要在控制器方法上编写RenderAction来显示其内容吗?示例JQuery:

function RenderPartialView(view, contentcontainer, maskcontainer, params) {
    $.get(view, params, function (data) {
        $("#" + contentcontainer).html(data);
        $(maskcontainer).unmask();
    });
}

   function displayExpandedView() {
       $('.expand-btn').on('click', function () {
           $(".expanded-view").modal();
           RenderPartialView("../some_dir/SomeView", "expanded-view", "#expanded-view", null);
       })
   }

因此,当我运行displayExpandedView()函数时,我想填充一个div作为一个带有SomeView文件内容的模态。当我目前尝试在我的应用程序中执行此操作时,服务器响应404错误,说该文件无法找到,即使他认为它的路径是正确的。使用此方法我还需要让控制器返回PartialView()吗?我的印象是我不会。

2 个答案:

答案 0 :(得分:1)

  

使用此方法我还需要让控制器返回PartialView()吗?我的印象是我不会。

是的,你仍然需要你的控制器来返回你的局部视图。请记住,当您使用ASP.NET的Render.PartialView时,就会发生在服务器端,因此正在完成所有适当的工作来生成HTML。但是,当您使用jQuery进行调用时,您无法直接从客户端访问HTML(如果可以的话,这不是一个好习惯)。相反,您需要调用您的控制器操作(或content file)到receive back the HTML which you can then append to your DOM

答案 1 :(得分:1)

您需要了解RenderPartial和RenderAction是服务器端代码,并且只要将页面传递给客户端,就会被实际HTML替换。如果您查看结果页面的来源,您将看到行RenderPartialView("../some_dir/SomeView", "expanded-view", "#expanded-view", null);将替换为从该部分视图呈现的HTML,这在该函数的上下文中不是有效的javascript。即如果部分审核返回<div>Something</div>,则该javascript函数将变为

function displayExpandedView() {
   $('.expand-btn').on('click', function () {
       $(".expanded-view").modal();
       <div>Something</div>
   })

因此不是有效的javascript。

要从javascript检索视图,您的Get应指向操作的网址:

Javascript向控制器操作发出请求,该操作将检索HTML:

$.get('@Url.Action("ActionName","ControllerName")', function(response) { 
  //URL could also be a regular relative url, so long as it reaches the controller action, note here agsain Url.Action is a server side action and is replaced by a URL when page is rendered.
  $('.result').html(response);//stuff the HTML returned into some element with class .result
  alert('Load was performed.');
});

动作:

public ViewResult ActionName()
{
   return View("ViewName");
}