What is the easiest (correct) way in ASP.NET MVC 2 to make a button-click display text?

Question

I need to make a quick demo showing how to do interactivity on an ASP.NET MVC page.

I opened an ASP.NET MVC project in Visual Studio 2010, put the view in design mode, dragged in a button, double-clicked on it and looked at the view again. I was expecting to see some ingenious JQuery code generated but instead an <asp:Button> and a <script runat="server"> block was created, which seems to be a mixing of classic ASP.NET and ASP.NET MVC metaphors. I don't think that is the recommended way to build interactivity in MVC, right?

So what is the easiest, most standard-MVC approach for me to (1) create a button, (2) when the button is clicked, change some text in my view?

• is it really best practice in MVC to use the runat-server block?
• are there some easy wizards which generate JQuery interactivity so that I can do this in a best-practice MVC way?
• or do I need to implement the JQuery myself as I would on a plain HTML page without ASP.NET MVC?

View:

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

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {

    }
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <form id="form1" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <p>

        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

    </p>
    </form>
</asp:Content>

Answer 1

You should not use asp.net ajax controls in asp.net MVC. If you want to create a button just write some old-fashioned html like:

<input type="button">Button</input>

then if you need this button to make some action, just write new action instead of code behind method like and call it like:

<input type="button" onclick="javascript:window.location = 'http://mypage.com/mycontroller/buttonaction' />

or even better create a link instead of button by using mvc builded-in html helpers:

<%= Html.ActionLink("Do something" ,"ButtonAction") %>

Faster you catch it better for you. You need to resign from asp.net ajax habit. There is no postback or code behind and it's removed with a reason. MVC is controlled by executed actions which means that you are steering the application by calling specified links. By using pure html you've got lot more control on your output code and flow of actions in your application.

Remember that MVC is not a new ASP.NET AJAX and those two will goes together, so if this style of writing we apps does not suits you then you do not need to use it. It's just the metter of choice which technology is better for you and your projects.

Also to learn more about mvc visit asp.net mvc webpage. I specially recomend you to see some videos like this one. It will definitely help you to better understand what mvc is and what are it's advantages and disadvantages.