Skip to main content

How to use Asp.net mvc JavaScriptResult practically

I am usually very excited about knowing something that can make my life easy and JavaScriptResult is one of that thing. It is used to execute JavaScript code immediately on the client sent from the server. Here is the small code snippet for its implementation.

View:  
<%: Ajax.ActionLink("display", "Display", new AjaxOptions()) %>
<%: Html.TextBox("name","mazhar") %>
<%: Ajax.ActionLink("checks", "Checks", new AjaxOptions()) %>

Controller:
  public ActionResult Display()
  {        
    var  script = "$('#message').append('Display');";
    return JavaScript(script);
  }

  public ActionResult Checks()
  {        
    string script = "var textboxvalue=$('#name').val();";
    script += "$('#message').append(textboxvalue);";
    return JavaScript(script);
  }

Output:

1) Clicking on the first link will display Display in the message div.
2) Clicking on the second link will display mazhar in the message div.

It's usage in the light of Asp.net Mvc:

Asp.net mvc is the design pattern which is all about separation of concern . It has the model, view and controller. Each doing it part and not intermingling with each other directly. My Advice would be to not use it but this thing is present if it become necessary.
Labels:

Comments

  1. A.Ahmed31 March 2011 at 13:02

    Can u mention out put result bcoz I’m not near any computers with Visual Studio installed.

    ReplyDelete
  2. Unknown13 June 2013 at 05:26

    It is not working.
    It displays the script in the browser as it is.

    ReplyDelete

Post a Comment

Popular posts from this blog

Asp.net mvc razor render partial view using ajax helper

This is the extension to my blog in which I demonstrated rendering of the partial view using jquery Ajax . I want to demonstrate here yet another way by which partial view can be rendered without page refresh. Here is the implementation. Step 1: I will again be using DisplayData class in my demo. Here is it. public class DisplayData { public int ID { get; set; } public DisplayData(int ID) { this.ID = ID; } } Step 2: Create a PartialDemo page @model IEnumerable<MvcApplication5.Models.DisplayData> @{ ViewBag.Title = "PartialDemo"; } @Ajax.ActionLink("Click 1", "PartialDemo", "PartialDemo", new {Data= "1" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" }) @Ajax.ActionLink("Click 2", "PartialDemo", "PartialDemo", new {Data= "2" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" }) <div id="rsvpms...
9 comments
Read more

Asp.net mvc razor render partial view using jquery Ajax

I will going to demonstrate how we can render PartialViews using Jquery Ajax. I will be clicking an a href link ,then I will be calling the controller through jquery Ajax which will fill the partialview for a really nice user experience. Step 1: First of all we will be creating an DisplayData class for the use for this example in the model. public class DisplayData { public int ID { get; set; } public DisplayData(int ID) { this.ID = ID; } } Step 2: We will create a Clicks page and write the following code on it. Specially note empty here which will going to empty and then fill partialview with new records. $(document).ready(function () { $('.msg').click(function () { var id = this.id; $.ajax({ url: "/Category/Display", data: { data: id }, success: function (mydata) { $("#link").empty().appe...
12 comments
Read more

Entity Framework many to many relationship.

In this post I will be demonstrating how you can create many to many relationship between classes by using EF code first approach with DataAnnotation attributes. You can use the EF fluent API as well for many to many configuration which I have not covered here. I will be using the classes post and tag in my model which has many to many relationship between them i.e a single post can have many tags and a single tag can have many posts. To get started with many to many configuration between the post and the tag you have to create the classes first. The EF will automatically create the third table when the application will execute, so you will not be creating the third table manually in the model. Let's get started with the code. public class Post { public long PostID { get; set; } [Required] [MaxLength(255)] public string Title { get; set; } [Required] [MaxLength(4000)] [DataType(DataType.MultilineText)] public string Question { g...
Post a Comment
Read more