Tuesday, 11 November 2014

What is the use of HTML Helpers in ASP.NET MVC ?

If you are learning ASP.NET MVC, you will ask what is html.beginform or other such tags.

What is HTML Helper provide or what is the use of it ?


 A HTML Helper is just a method that returns a HTML string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input>, <button> and <img> tags etc.


Just like web form controls in ASP.NET, HTML helpers are used to modify HTML.But HTML helpers are more lightweight. Unlike Web Form controls, an HTML helper does not have an event model and a view state.

Standard Helpers: MVC includes standard helpers for the most common types of HTML elements, like HTML links and HTML form elements.

HTML Links: The easiest way to render an HTML link in is to use the HTML.ActionLink() helper.

With MVC, the Html.ActionLink() does not link to a view. It creates a link to a controller action.

Razor Syntax: @Html.ActionLink("Be Master of One and Jack of All", "Info")

ASP Syntax: <%=Html.ActionLink("Be Master of One and Jack of All", "Info")%>

The first parameter is the link text, and the second parameter is the name of the controller action.

The Html.ActionLink() helper above, outputs the following HTML:
<a href="/Home/About">About this Website</a>

HTML Form Elements:

There following HTML helpers can be used to render (modify and output) HTML form elements:
  • BeginForm()
  • EndForm()
  • TextArea()
  • TextBox()
  • CheckBox()
  • RadioButton()
  • ListBox()
  • DropDownList()
  • Hidden()
  • Password()
What do you think ?
I hope you will enjoy the HTML Helpers while programming with ASP.NET MVC. 
I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Thursday, 6 November 2014

Working with JQuery Text Editors

What if one of your client requirement is to provide a area where they can write some information in some particular format like in bold, italic, heading, underline etc and can save it and retrieve it back whenever required...

If your application is desktop you can get many options like you can open local installed application instance like word, lib-re etc

What if you are creating web application??
Solution is simple.. Jquery the most powerfull language in programming world can help you anytime...

There are many plugins build on top of jquery available for free over the net.
Some of them are as follows:
1. Jqte
2. tinyMCE
3. CKEditor and many more...

Sample using Jqte(jquery text editor)

1.  You need to download js and css file of jqte first and include it in your page:
    <link href="../../Scripts/jquery-te-1.4.0.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-te-1.4.0.min.js"></script>

2. html part:
  <input type="text" id="Body"/>

3. j query part:
    $("#Body").jqte(); // in .ready function

4. Fetching information entered by user:
  var DescriptionDetails = $("#Body").val();

  This will give you the string with the html tags. If you are planning to pass the data to server it won't work because it consists html tags. So to overcome the problem use escape function of jquery

  This function makes a string portable, so it can be transmitted across any network to any computer that supports ASCII characters.
  var Bodyvalescape = escape(Bodyval);

5. You can now send the string to server and encode it and store it...

6. Now how to populate the jqte:
     Get data from server side show it in jqte by writing below code
     $(".jqte_editor").html(data); // in jquery
 
   $(".jqte_editor").attr("contenteditable", "false");// will make editor non-editable
   $(".jqte_editor").attr("contenteditable", "true");// will make editor editable

For more information about other events available in jqte go to : http://jqueryte.com/ 

Similarly by performing some minor changes you can easily use some other editors..


Till then enjoy and have fun with JQuery