ASP.NET MVC 2 Confused about Javascript_问答_开发者

Hi I'm building my first MVC 2 app and I'm really confused by all the examples I'm reading. I am also using the Telerik MVC kit for their Grid, and other such controls.

I've read many tutorials and watched videos but I can't quite grasp the pattern of where to place javascript and how to wrap blocks of code in the appropriate tags. For example I am trying to follow the task of associating a Client with a State via a DropDownList of states (AZ, CA, etc..):

My ClientController looks like this:

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 looks like this:

<%@ 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 looks like this:

<%@ 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);
            ...

And the 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开发者_JAVA技巧.ValidationMessageFor(model => model.State) %>
    </div>
   </td>
  </tr>
</table>

And finally the editor template /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
        })
    )
%>

In general, I don't understand which portion ends up at the client and which portion ends up compiled at the server. I'm also very confused by the different notations for lambdas and/or registering events.

The lambda stuff is killing me. I spend a ton of time just trying to figure out when to use new {} and () => ....

Where does javascript go in these 3 files, and do I need special tags for it?
Where do I use <% tag versus <%= and <%: ?
Why is it that sometimes inside <% it asks to terminate with semicolon like MyFunction(); and other times it's just MyFunction() ?

Thank you!

Javascript can pretty much go anywhere but it's a good idea to place it in the <head> tag of your masterpage. In your child page you could include a <content> tag that will place javascript specific to your page in the appropriate place in your master page.

<%@ 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 <%=

<% is used to call a function on your server and do some processing that doesn't output data to the client. <%: is used to output a string using html encoding to the client - this is useful for outputting something that the user may have typed as they might include their own <script> tag so when you output it you'd see <script> in the source and it won't get parsed as script <%= is used to output a string but doesn't html encode the string

the semi-colon is only used when you don't output to the client. (Though some rare functions might still output but they would output internally rather than return a string or mvcstring. So any time you use <% %> you'd add a ; at the end.