Today I was trying to find out a way to use jQuery in one of my views. Since I include the jQuery in my master page I bumped into the problem that Visual Studio doesn’t recognize the jQuery in the child page.

So I tried some stuff, and I thought: I might share it as well here so you don’t spend time on looking up everything like I did.

First thing I tried is using the ///<reference path … /> syntax.

But this doesn’t work in <script …></script> tags. It only works in real (.js) javascript files.

I then used this ‘hack’ to make the intellisense work (and I don’t like hacks).

    <% if (false)
    { %>
    <script type="text/javascript" src="~/Scripts/jquery-1.3.2-vsdoc.js"></script>
    <% } %>

Stuff like this really makes my code look like a hack. I’ll test tonight if I have different behavior in Visual Studio 2010.

If you have a Ajax.Actionlink and you want to specify a OnBegin with a parameter you need to use the following syntax:

<%=Ajax.ActionLink("text", "Action", "Controller", new { param = someVar }, new AjaxOptions() { OnBegin = string.Format("new Function(‘DoSomeThing(this)’)", index),  HttpMethod = "POST" })%>

Where DoSomeThing is just a function that takes a string as parameter.

Update: added quotes around the real (inner) function, otherwise it’s executed instead of passed on at the creation of the object.

(scroll down for an in depth explanation)

I’m writing this post since I had a lot of problems finding out how Model binding works in ASP.NET MVC.

This behavior has changed in the beta and the final. This causes that some blog posts on the internet are inaccurate.

But let’s set things straight.

Create a MVC Project, leave everything default and add Product in your Models folders with the following (very simple) code:

namespace BlogPost.Models
{
    public class Product
    {
        public string Name { get; set; }
    }
}

Then add a ProductsController (in the Controllers folder) with the following code:

using System.Collections.Generic;
using System.Web.Mvc;
using BlogPost.Models;

namespace BlogPost.Controllers
{
    public class ProductsController : Controller
    {
        public ActionResult Add()
        {
            return this.View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Add(IList<Product> products)
        {
            return this.View();
        }
    }
}

And add the following view for the Add function:

With the following markup:

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Add up to 10 products to the database
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Add up to 10 products to the database</h2>
    <%
        using (Html.BeginForm())
        {
            for(int x = 0;x <= 9;x++)
            {
                %>
                <fieldset>
                    <legend>Product <%=x %>:</legend>
                    <input type="text" name="products[<%=x %>].Name" />
                </fieldset>
                <%
            }

            %><input type="submit" name="submitForm" value="Save products" /><%
        }
    %>
</asp:Content>

Now put a breakpoint in the Add function in your ProductsController that handles the Http Post.

Hit f5 and go to <your url>/Products/Add:

Enter 10 names, and hit the submit button at the bottom.

Visual Studio will break on your this.View(). Hover over your products parameter and you’ll see something in the lines of this:

Not too hard is it?

A little bit more in depth:

ASP.NET MVC binds your HTML input to your parameter through the default model binder. I recommend you read the source code available on http://aspnet.codeplex.com/SourceControl/changeset/view/23011

If you want to step through the source code using your application I refer you to Steve Sanderson’s excellent blog post.

If you take a look at the generated HTML source code you’ll notice this:

<fieldset>
    <legend>Product number 0:</legend>
    <input type="text" name="products[0].Name" />
</fieldset>
<fieldset>
    <legend>Product number 1:</legend>
    <input type="text" name="products[1].Name" />
</fieldset>

The name ‘products’ is VERY important, since this specifies that it your input should be bound to the ‘products’ parameter in your controller action.

Then the index between brackets: IT MUST START FROM 0 AND BE CONTINUES!

Then the .Name, which specifies that your input should be placed in the Name property (not just a public variable, but a property with a get/set) (see code above).

You can repeat this for multiple properties, and group them by product.

That’s it for simple model binding.

Hope it helps.

Check the ‘Insert attribute value quotes when typing under Text Editor > HTML > Format

public static string Submit(this System.Web.Mvc.HtmlHelper html, string name, string value)
{
    TagBuilder tagBuilder = new TagBuilder("input");
    tagBuilder.MergeAttribute("value", value);
    tagBuilder.MergeAttribute("name", name);
    tagBuilder.MergeAttribute("type", "submit");
    return tagBuilder.ToString(TagRenderMode.SelfClosing);
}

Easy submit button creation through

<%=Html.Submit("submit", "Your Text") %>

If you have a model for your view you can do

Html.TextBox("Title")

Which automaticly (through reflection) fills in the Model.Title value as value, so you don’t need to do

Html.TextBox("Title", Model.Title)

Als je met ASP.NET een webpagina maakt, en gebruik wilt maken van XHTML 1.0 Strict of 1.1 (1.1 is altijd Strict) loop je tegen het probleem op dat de pagina’s die gerenderd worden door het .NET framework niet compliant zijn aan de XHTML standaard. De id’s zijn niet goed, name en id’s worden verwisseld.

Om dit te vermijden moet je in je web.config hetvolgende aanpassen:

Of kijk hier voor de link op MSDN (2de codeblock).

-Kristof out.