Monday, November 10, 2014

Effective use of rarely used Html Input Types and MVC ActionTypes

What is it about:

Here, we’ll learn about some html input types and MVC ActionTypes which are very effective, that we use rarely.

First, let’s go through the html input types we can use:

Input Controls - After creating layouts we use controls to our web application. Commonly used controls like button, text, radio, check box etc all these can be used for dynamic action in web app. But we missed some controls:
reset - Defines a reset button (resets all form values to default values)

If a form has numerous controls like button, check box, radio, text etc. after all the process is completed at certain point we need to clear all the values in all the controls in the form on those times we would generally write a method and in it we would just write like "txtname.text = "" " and do the same for all the controls. But in input control there is a control called reset it acts as a normal button but when we declare "" and click it by default all the values in the form will be resetted and we can avoid writing lots of code.
Similarly, there are a number of types:

color - Defines a color picker

date - Defines a date control (year, month and day (no time))

datetime - Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second, based on UTC time zone)

datetime-local - Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)

email - Defines a field for an e-mail address

image - Defines an image as the submit button

month - Defines a month and year control (no time zone)

number - Defines a field for entering a number

password - Defines a password field (characters are masked)

range - Defines a control for entering a number whose exact value is not important (like a slider control)

reset - Defines a reset button (resets all form values to default values)

search - Defines a text field for entering a search string

tel - Defines a field for entering a telephone number

time - Defines a control for entering a time (no time zone)

url - Defines a field for entering a URL

week - Defines a week and year control (no time zone)

Now, Lets see some of the MVC ActionTypes:

We normally use View, Partial View, RedirectToAction, Redirect. But there more other Actions that we know of but never got the chance to use it like,
ContentResult - Raw content sent to the browser. There are multiple overloads of the Content() method.

All the parameters are mentioned below that you can pass as an argument

string: The string to render to the browser.

contentype: The MIME type of the content (defaults to text/html).

contentEncoding: The text encoding of the content (e.g.:-Unicode or ASCII)

File Result - Return a file from an action. E.g.: image file, word file etc.This method accepts the following parameters which are mentioned here: filename, contentType, fileDownloadName, fileContents [instead of providing the path to the file to download, you can provide the actual file contents as a byte array], fileStream.

JavaScriptResult action result - As the name implies, its purpose is return a javascript code that can execute on the client browser. Here’s the snippet:
public class HomeController : Controller
{
public JavaScriptResult ExecuteJs()
{
string script = string.Format("$('#date-container').html('{0}')", DateTime.UtcNow.ToLongTimeString());
return JavaScript(script);
}
}

The snippet above will send the javascript code to the client after a call to ExecuteJs. In your UI, you have some mark up like this one:
@Ajax.ActionLink("Load", "ExecuteJs", new AjaxOptions())
< div id="date-container"> < / div>
Once everything is set up, our html markup should look like this in ff (unobtrusive mode):
<a href="/Home/ExecuteJs" data-ajax="true">Load</a>
<div id="date-container">8:10:48 PM</div>

This code sample simply creates an anchor tag that calls ExecuteJs controller via ajax and executes the script on the client rendering the current time. Thanks for taking a look at this post. Keep Talking Tek.

No comments:

Post a Comment