如何从javascript / jquery调用cshtml文件？

Question

我正在尝试将级联下拉列表添加到网站上的页面。 我遵循了http://www.mikesdotnetting.com/article/196/webmatrix-jquery-cascading-dropdown-lists上显示的示例，唯一的变化是我已更改了变量名以适合我的应用程序，并且我只希望该功能在某些情况下存在（即创建新记录），相关代码周围有一个if语句。

尽管我的第二个下拉列表在页面加载时被禁用（如预期的那样），但是当选择了第一个下拉列表项之一时，它并未启用。

我怀疑我没有正确调用GetClients.cshtml（我的Mike的GetProducts.cshtml的变体），可能是由于以下原因：

$.getJSON('/GetClients/' + ActivityID, function (clients) {

没有在正确的文件夹中查找。

在理想的情况下，无论使用服务器版本还是本地主机，我都可以使用Razor波浪号（〜）强制显示正确的完整路径。 但这似乎不是JavaScript中的选项。

GetClients.cshtml与包含我要控制的JS代码，HTML下拉列表等的cshtml文件位于同一文件夹中。 有人可以让我知道上面的代码是否引用了“隔壁”文件，如果没有，我应该修改上面的代码行吗？

Answer 1

您不能直接从Javascript调用视图，这就是为什么只在返回该视图的ASP.NET MVC Controller中创建Action的原因。

public MyController{
   public ActionResult GetMyCoolCshtmlFile(){
      return View("pathToMyCoolCshtml.cshtml");
   }
}

并在JS中调用它：

 $.get("/my/GetMyCoolCshtmlFile").done(function(yourMarkup){doWhatYouWantWithYourMarkup(yourMarkup);})

Answer 2

您将不会直接访问剃刀视图，而是将通过操作方法来访问它。

我认为问题是您得到404，因为路径不正确。 如果打开浏览器控制台，应该会看到404错误。

使用Url.Action html帮助器方法可生成操作方法的正确相对路径。

var url="@Url.Action("GetClients","YourcontrollerName")";    
$.getJSON(url + ActivityID, function (clients) { });

当razor视图引擎执行该视图时，它将调用helper方法并将该方法调用的输出（这是action方法的正确相对路径）用于javascript变量。 无论您当前的页面/ URL如何，此解决方案都将起作用。

假设您有一个名为GetClients的操作方法， GetClients方法接受一个id并以JSON格式返回客户端。

public ActionResult Getclients(int id)
{
  // to do  : Return a list of Clients as json 
}

如果上面的代码在剃刀视图中，它将起作用。 如果你的代码是一个extenal的JavaScript文件中，使用该解决方案在此解释后 。

Answer 3

如果您的GetClients.cshtml文件位于根目录下的文件夹中，则需要将该文件夹包含在传递给getJSON方法的URL中。 例如，假设您的结构如下：

root
    folder
        GetClients.cshtml
        CallingPage.cshtml
    Default.cshtml
    etc

传递给getJSON方法的url应该是/folder/getclients加上要传递的所有其他URLData / querystrings。