Converting button events etc to ASP.NET MVC

Question

Given an asp.net webform page which does something like

asp.net

 <asp:textbox id="txtA" runat="server" />
 <asp:textbox id="txtB" runat="server" />
 <asp:button id="btnAddTogether" runat="server" text="Go" onclick="btn_Click"/>

 <asp:textbox id="txtResult" runat="server" />

code behind

protected void btn_Click(...)
{
    txtResult.Text = txtA.Text + txtB.Text;
}

How would I convert this to ASP.NET MVC. It's a pretty trivial example, but I'm not sure about how to change my way of thinking.

Answer 1

There's really no direct conversion.

Theoretically, that button would be submitting a Model (via a <form> tag) to a Controller for an Update Action. The string manipulation would then happen inside of your Controller code.

Your example would become something like:

<% using Html.BeginForm("Update", "Home") { %>
    <%= Html.TextBox("txtA") %>
    <%= Html.TextBox("txtB") %>
    <input type="submit" value="Submit" />
<% } %

And then your controller would have:

public class HomeController : Controller
{
    public ActionResult Update(string txtA, string txtB)
    {
        ViewData["result"] = txtA + txtB;
    }
}

Answer 2

Instead of a Click handler, you make a <form> tag that submits to an Action.
The action can then perform its logic and return a view that displays the result.

Answer 3

Better if you check MVC tutorials here. http://www.asp.net/learn/mvc/.

And if you are really looking for changing a current application to MVC then you should see this video first.

Answer 4

I'd also recommend you to read the MVC tutorials, but for this particular case you would do something like the following.

In the .aspx (let's assume it's called ViewA):

<% using(Html.BeginForm("Concatenate"))
{ %>
    <%= Html.TextBox("txtA") %>
    <%= Html.TextBox("txtB") %>
    <input type="submit" value="Go" />
<% } %>

<%= Html.TextBox("txtResult")%>

In the Controller for that View you'll need an action:

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Concatenate(string txtA, string txtB)
    {
        this.ViewData["txtResult"] = txtA + txtB;
        return this.View("ViewA");
    }

Note that this isn't the recommended way, instead of using the ViewData dictionary, you sould use a specific ViewModel class with all the data for the particular view.

Answer 5

There is such a method, too.

  [AttributeUsage(AttributeTargets.Method, 
                  AllowMultiple = false, Inherited = true)]
  public class SubmitCommandAttribute : ActionMethodSelectorAttribute
  {
    private string _submitName;
    private string _submitValue;
    private static readonly AcceptVerbsAttribute _innerAttribute = 
                                 new AcceptVerbsAttribute(HttpVerbs.Post);

    public SubmitCommandAttribute(string name) : this(name, string.Empty) { }
        public SubmitCommandAttribute(string name, string value)
    {
          _submitName = name;
          _submitValue = value;
    }

    public override bool IsValidForRequest(ControllerContext controllerContext, 
                                           MethodInfo methodInfo)
    {
      if (!_innerAttribute.IsValidForRequest(controllerContext, methodInfo))
        return false;

      // Form Value
      var submitted = controllerContext.RequestContext
                                       .HttpContext
                                       .Request.Form[_submitName];
      return string.IsNullOrEmpty(_submitValue)
               ? !string.IsNullOrEmpty(submitted)
               : string.Equals(submitted, _submitValue, 
                               StringComparison.InvariantCultureIgnoreCase);
    }
  }

Sample controller code.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

    [ActionName("Different")]
    [SubmitCommand("DoSave")]
    public ActionResult DifferentSave()
    {
      TempData["message"] = "saved! - defferent";
      return View("Index");
    }

    [ActionName("Different")]
    [SubmitCommand("DoDelete")]
    public ActionResult DifferentDelete()
    {
      TempData["message"] = "deleted! - defferent";
      return View("Index");
    }

    [ActionName("Same")]
    [SubmitCommand("DoSubmit","Save")]
    public ActionResult SameSave()
    {
      TempData["message"] = "saved! - same";
      return View("Index");
    }

    [ActionName("Same")]
    [SubmitCommand("DoSubmit","Delete")]
    public ActionResult SameDelete()
    {
      TempData["message"] = "deleted! - same";
      return View("Index");
    }
  }

and view.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
</head>
<body>
  <h1><%= TempData["message"] ?? "Click some button" %></h1>

  <h2>Different sumit name(ignore value).</h2>    
  <% using (Html.BeginForm("Different", "Home")) { %>
    <input type="submit" name="DoSave" value="Save" /><br />
    <input type="submit" name="DoDelete" value="Delete" />
    <% } %>

  <h2>same submit name and different value.</h2>    
  <% using (Html.BeginForm("Same","Home")) { %>
    <input type="submit" name="DoSubmit" value="Save" /><br />
    <input type="submit" name="DoSubmit" value="Delete" />
    <% } %>
</body>
</html>

Hope this code.

Answer 6

You don't have to create any views, like others suggested. You don't have to wrap it up into form, because these inputs will be propably part of bigger form.

When you start using ASP.NET MVC, you have to learn JavaScript/jQuery. It can replace a lot of functions that were solved by using postback mechanism in WebForms.

This example can be easily solved on client side or server side:

<form action="" method="post">
<%= Html.TextBox("txtA") %>
<%= Html.TextBox("txtB") %>
<button id="btClientSideAdd" onclick="$('#txtResult').val($('#txtA').val() + $('#txtB').val()); return false;">
    Add on client</button>
<button id="btServerSideAdd" onclick="$.post('Home/Add', { a: $('#txtA').val(), b: $('#txtB').val()  }, function(data) { $('#txtResult').val(data) }); return false;">
    Add on server</button>
<%= Html.TextBox("txtResult") %>
<input type="submit" />
</form>

Additional code for server side:

public JsonResult Add(string txtA, string txtB)
{
    return Json(txtA + txtB);
}

This code adds on client side:

$('#txtResult').val($('#txtA').val() + $('#txtB').val());

You can also pass values to server:

$.post(
  'Home/Add', //Action to execute
  { a: $('#txtA').val(), b: $('#txtB').val()  }, //input values
  function(data) { $('#txtResult').val(data) } //what to do with result
);

To do it on client side, you have to use jQuery.post()/jQuery.ajax(). Read about using partial view and JsonResults.