C# code in JQuery in ASP.NET razor view

Question

I have a server-side model with a datetime type field PublishDate. I am sending List<Posts> as json in response to ajax call.

I would like to use c# code Convert.ToDateTime(this.PublishDate).ToString("MMM dd, yyyy") in jquery code. Below is my code what I tried so far-

var posts = response.Posts;
$.each(posts, function () {
  $('#container').append('<div class="row"> 
                            <div class="col-lg-12">
                              <h2>' + this.PostTitle + '</h2>
                              <span>Published on: @Convert.ToDateTime(this.PublishDate).ToString("MMM dd, yyyy")</span></div></div>');
});

But it's not working. Any idea?

Where do you place the jquery code because you're trying to combine Razor and jquery — ssimeonov
– ssimeonov, Commented Sep 2, 2015 at 7:15
why is javascript date formatting out of the question? there are libraries designed to help tackle this specific problem, like moment.js — Timothy Groote
– Timothy Groote, Commented Sep 2, 2015 at 7:22
You dont need Convert.ToDateTime() if its already a DateTime - just @PublishDate.ToString("MMM dd, yyyy") but this does not make a lot of sense since razor code is parsed on the server. Is this part of an ajax callback? — user3559349
– user3559349, Commented Sep 2, 2015 at 7:23
If this is an ajax callback, why not just format the date in the controller method? — user3559349
– user3559349, Commented Sep 2, 2015 at 8:11

CodePhobia · Accepted Answer · 2015-09-02 07:40:21Z

1

The whole point of using Razor is that you can use the power of C# in your html code, or cshtml to be more precise.

Assuming your div id is container, you can do this.

You have a member in your model class named PublishDate

Add this in HTML

<input id="container" name="@Html.DisplayNameFor(model => model.PublishDate)" value="@DateTime.PublishDate.ToString("MMM dd, yyyy")">

And remove the coversion from jQuery.

edited Sep 2, 2015 at 7:40

answered Sep 2, 2015 at 7:19

CodePhobia

1,31510 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Timothy Groote Over a year ago

In this case it looks like we're dealing with a javascript object gotten from an action method somewhere else. You might want to give the object a property with the properly formatted value for publishdate before you render it to the page. This is why viewmodels are a good idea.

CodePhobia Over a year ago

Indeed, just picked up knockoutjs.com. MVVM is really the way to go for modern interactive web dev.

user3559349 Over a year ago

A <div> does not have a value attribute!

CodePhobia Over a year ago

Oops yes, I had an input tag converted it to div for example

user3559349 Over a year ago

OP wanted a div, but this has nothing to do with OP's question anyway - which is generating the markup dynamically in jquery - and you cant use razor code to do that because the razor code is parsed on the server

Karthic G · Accepted Answer · 2015-11-25 19:45:59Z

1

It could be, worked for me.
Try this format:

Convert.ToDateTime(PublishDate, System.Globalization.CultureInfo.GetCultureInfo("hi-IN").DateTimeFormat);

edited Nov 25, 2015 at 19:45

user5461770

answered Sep 3, 2015 at 13:56

Karthic G

1,2022 gold badges17 silver badges33 bronze badges

Comments

Timothy Groote · Accepted Answer · 2015-09-02 07:31:29Z

0

You can't interuse C# and jquery code in this way, for the simple reason that the C# code is executed server side, before the data is sent to the page.

The code that says @Convert.ToDateTime(this.PublishDate) looks for a property called PublishDate on the class that renders the razor page and tries to convert it to a DateTime object.

One way to do what you're looking for, is to add a property to your model that has the properly formatted date in it already, so you don't have to bother with parsing it using Javascript.

Another is to parse it with javascript anyway. Because date/time objects are complex and tricky things and can trouble your day with cross browser quirks, using a library to make your life easier is recommendable. A good place to start would be Moment.js

which would look something like this :

'<span> Published on: ' + moment(this.PublishDate).format('MMM dd , yyyy') +  ' </span></div></div>'

answered Sep 2, 2015 at 7:31

Timothy Groote

8,69229 silver badges53 bronze badges

1 Comment

Timothy Groote Over a year ago

Bonus points if you drop javascript string concatenation all together and use a templating engine ;)

Collectives™ on Stack Overflow

C# code in JQuery in ASP.NET razor view

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related