ASP.NET MVC 2 对 Javascript 感到困惑答案

【问题标题】：ASP.NET MVC 2 Confused about JavascriptASP.NET MVC 2 对 Javascript 感到困惑
【发布时间】：2010-09-30 03:38:40
【问题描述】：

您好，我正在构建我的第一个 MVC 2 应用程序，我对我正在阅读的所有示例感到非常困惑。我还在为他们的 Grid 和其他此类控件使用 Telerik MVC 套件。

我阅读了许多教程并观看了视频，但我不能完全掌握放置 javascript 的模式以及如何将代码块包装在适当的标签中。例如，我正在尝试通过状态（AZ、CA 等）的 DropDownList 将客户端与状态关联起来：

我的 ClientController 如下所示：

void PopulateStates()
{
    var tempRepo = RepositoryFactory.CreateRepostiory<State>(RepositoryType.Business);
    var states = tempRepo.QueryAll().ToList();
    var svmList = states.Select(s => Mapper.Map<State, StateViewModel>(s));

    ViewData["States"] = svmList;
}

public ActionResult Index()
{
    PopulateStates();
    return View();
}

Index.aspx 看起来像这样：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <% Html.RenderPartial("ClientGrid"); %>

</asp:Content>

ClientGrid.ascx 如下所示：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<%= Html.Telerik().Grid<ViewModels.ClientViewModel>()
    .Name("ClientGrid")
    .EnableCustomBinding(true)
    .DataKeys(keys =>
    {
        keys.Add(c => c.Id);
    })
    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text))
    .DataBinding(dataBinding =>
    {
        dataBinding.Ajax()
            .Select("_Select", "Clients", new Telerik.Web.Mvc.GridState())
            .Insert("_Insert", "Clients", new Telerik.Web.Mvc.GridState())
            .Update("_Save", "Clients", new Telerik.Web.Mvc.GridState())
            .Delete("_Delete", "Clients", new Telerik.Web.Mvc.GridState());
    })
    .Columns(columns =>
    {
        columns.Bound(c => c.Id);
            ...

还有 ClientViewModel.ascx：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ViewModels.ClientViewModel>" %>

 <table>
  <tr>
   <td>
    <div class="editor-label">
        <%: Html.LabelFor(model => model.StateName) %>
    </div>
    <div class="editor-field">
        <%: Html.EditorFor(model => model.State) %>
        <%: Html.ValidationMessageFor(model => model.State) %>
    </div>
   </td>
  </tr>
</table>

最后是编辑器模板/Shared/EditorTemplates/StateViewModel.ascx：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ViewModels.StateViewModel>" %>

<%=
    Html.Telerik().DropDownList()
    .Name("DropDownList")
    .BindTo
    (
        ((IEnumerable<ViewModels.StateViewModel>)ViewData["States"])
        .Where(s => s.StateType == "State")
        .Select(s => new SelectListItem
        {
            Text = s.FormattedName,
            Value = s.Id.ToString(),
            Selected = (Model != null) ? (Model.Id == s.Id) : false
        })
    )
%>

一般来说，我不明白哪个部分最终在客户端以及哪个部分最终在服务器上编译。我也对 lambdas 和/或注册事件的不同表示法感到非常困惑。

lambda 的东西让我很生气。我花了很多时间试图弄清楚何时使用 new {} 和 () => ....

这 3 个文件中的 javascript 放在哪里，我需要特殊标签吗？
与<%= 和<%: 相比，我在哪里使用<% 标签？
为什么有时在<% 中要求以分号结束，例如MyFunction();，而其他时候只是MyFunction()？

谢谢！

【问题讨论】：

标签： javascript jquery asp.net-mvc-2 asp.net-ajax

【解决方案1】：

Javascript 几乎可以在任何地方使用，但最好将其放在母版页的<head> 标记中。在您的子页面中，您可以包含一个 <content> 标记，它将特定于您的页面的 javascript 放置在您的母版页的适当位置。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    //javascript goes here in <script> tags
</asp:Content>

<% vs <%: vs <%=

<% 用于调用服务器上的函数并执行一些不向客户端输出数据的处理。 <%: 用于使用 html 编码向客户端输出字符串 - 这对于输出用户可能键入的内容很有用，因为他们可能包含自己的 &lt;script&gt; 标签，因此当您输出它时，您会看到 &lt;script&gt;在源代码中，它不会被解析为脚本 <%= 用于输出字符串但不 html 对字符串进行编码

分号仅在您不输出到客户端时使用。（虽然一些罕见的函数可能仍会输出，但它们会在内部输出而不是返回字符串或 mvcstring。因此，任何时候使用<% %>，您都会在末尾添加;。

【讨论】：

那么什么时候可以混合它们呢？在它们之间打开/关闭标签和括号的规则是什么？
好吧，你可以在任何地方混合 javascript...关于打开关闭标签，你只需要总是关闭打开标签 - 括号应该是有意义的。在 if 语句中打开标签而不关闭它是没有意义的。与foreach 语句相同。