Passing value from model to javascript

Question

0.00/5 (No votes)

See more:

Hello,
I want to cutomize a calendar template and for which I have a model:--

C#

public class TimeSlotModel
    {
        public long Id { get; set; }
        public DayOfWeek DayOfWeek { get; set; }
        public string StartHour { get; set; }
        public string EndHour { get; set; }
    }

these fields are save in db and now i want to use these entries in my calendar.js,
So how i use the model values in javascript template.

Thanks

Posted 25-Nov-13 19:09pm

Member 9534579

Updated 25-Nov-13 19:39pm

walterhevedeich

v2

Add a Solution

Comments

manoj.jsm 26-Nov-13 1:34am

Hi You Can Using JSON Data pass to Model Value to JS

Member 9534579 26-Nov-13 2:04am

No my controller is like this:
[HttpGet]
public ActionResult Calendar()
{
var model = this.instructorService.GetAllTimeSlots();

var viewModel = ModelMapper.Map<ilist><timeslot>, IList<timeslotmodel>>(model);

return this.View(viewModel);
}

From this i got the value of all fields in viewModel but not in html page.

manoj.jsm 26-Nov-13 2:27am

Dude if ur using FullCalendar Js
you can try this link:
http://growingtech.blogspot.in/2012/02/full-calendar-with-json-data-source.html
http://stackoverflow.com/questions/11310013/passing-fullcalander-events-via-json-to-controller
http://stackoverflow.com/questions/1544010/jquery-full-calendar-not-showing-events?rq=1

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

♥…ЯҠ…♥ · Accepted Answer · 2013-11-25T19:53:00

Solution 1

Hi,
If you want to use model value in javascript,then you need to access model value like this

var modelJSValue = '@Model.Id';(Razor code) or '<%: Model.Id %>'

Now your modelJSValue will have value of ID that belongs to your model.

Updated solution:

XML

<script>
        jQuery(document).ready(function () {
            // initiate layout and plugins
            App.init();
            var modelJSValue = '@Model.Id';
alert(modelJSValue); //Confirm and see what we get at this point.
            Calendar.init(modelJSValue); //Pass modelJSvalue to your script
});
</script>

Note: Make sure you read the parameter value in your js file as well.
Hope this helps you a bit.

Regards,
RK

Posted 25-Nov-13 19:53pm

♥…ЯҠ…♥

Updated 25-Nov-13 20:11pm

v3

Comments

Member 9534579 26-Nov-13 2:03am

I am already try this but can you plz tell me where I put this...in my cshtml page where i call javascript...
<script>
jQuery(document).ready(function () {
// initiate layout and plugins
App.init();
Calendar.init();
var modelJSValue = '@Model.Id';
});
</script>

or in calendar.js...

var Calendar = function () {

return {
//main function to initiate the module
init: function () {
Calendar.initCalendar();
},

initCalendar: function () {

if (!jQuery().fullCalendar) {
var modelJSValue = '@Model.Id';
//var id=document.getElementById("Id")
//var modelId = '@Model[0].Id'
//var modelName = '@Model[0].StartHour'
//var modelName = '@Model[0].EndHour'
//var modelName = '@Model[0].DayOfWeek'
return;
}
---
----

Actuly I apply these things but still no result.

♥…ЯҠ…♥ 26-Nov-13 2:10am

Updated my solution.. try it and lemme know

Member 9534579 26-Nov-13 4:47am

Thanks this helps me i got a Id value in html.cs page but it still not pass in the calendar.js I write like this....

var Calendar = function () {
return {
//main function to initiate the module
init: function () {
Calendar.initCalendar();
},
initCalendar: function (modelValue)
{
modelJSValue = modelValue;
alert('modelValue');
if (!jQuery().fullCalendar)
{
return;
}
var date = new Date();
var d = date.getDate();
--- ......
---- .....

here alert didn't show id value(parameter value)... it show only:modelJSValue

Member 9534579 26-Nov-13 4:26am

Thanks this helps me i got a Id value in html.cs page but it still not pass in the calendar.js I write like this....

var Calendar = function () {

return {
//main function to initiate the module
init: function () {
Calendar.initCalendar();
},

initCalendar: function (modelValue) {
modelJSValue = modelValue;
alert('modelValue');
if (!jQuery().fullCalendar) {
return;
}

var date = new Date();
var d = date.getDate();
---
----

here alert show didn't show id value...

♥…ЯҠ…♥ 26-Nov-13 4:49am

init: function (modelIDVal) {
Calendar.initCalendar(modelIDVal);
}
and in initCalendar: alert(modelValue);(remove quotes)

Now try......

Member 9534579 26-Nov-13 4:53am

Thanks

Member 9534579 26-Nov-13 5:05am

Ohh sure..Thanks for all reply...and i'll definitely vote for you....

One last thing...
I have a number of values in my table so how i can define in script and how i apply loop under script for testing purpose i write like this...

<script>
jQuery(document).ready(function () {
// initiate layout and plugins
App.init();

var modelValue = '@Model[0].Id';
//alert(modelValue);
Calendar.init(modelValue);
});

but now i want to take number of values of another fileds too as Hours,Day...

plz help me for both pages cs.html and calendar.js...

♥…ЯҠ…♥ 26-Nov-13 5:27am

Then I would like to suggest you to use ajax call to get data from database and pass it on to JS file. Just google it you will get tons of idea for the same.