Passing local variable in Razor view by JavaScript to java script function and then to C# method

Question

I would like to pass @survey which is object of class Survey to the JavaScript function SubmitClick and then to the SubmitSurvey in PersonController.cs

My button: when clicked it passes arguments to javascript:SubmitClick

<button class='mybutton' type='button' onclick="javascript:SubmitClick(@Model.Item1.Id, @survey);">Save Survey</button>

and JavaScript function:

function SubmitClick(pid, sid) {     
    var url = '@Url.Action("SubmitSurvey", "Person")';
    $.post(url, { personId: pid, survey: sid }, function (data) {
        alert('updated' + pid);
    });
}

and method to which I want to pass @survey:

  public void SubmitSurvey(int personId, Survey survey) {

        }

The result is:

enter image description here

I want to point out that passing @survey.Id(int) worked so the only problem is passing the @survey.

Error pop ups at passing arguments to java script function.

EDIT

The button is inside foreach loop and the model is little bit complex. Can I just serialize it inside a loop?

I pass List of Survey to the view from here:

 public ActionResult _Survey1(int id) {
            System.Diagnostics.Debug.WriteLine("PASSED ID: " + id);
            Person person = db.Persons.Find(id);
            //Passing a Tuple to Partial View, I want to pass copies further I use copying constructor
            List<Survey> localSurveysCopy = new List<Survey>();
            foreach (Survey survey in db.Surveys) {
                localSurveysCopy.Add(new Survey(survey));
            }
            var tuple = new Tuple<Person, List<Survey>>(person, localSurveysCopy) { };
            return PartialView(tuple);
 }

The view:

 @using WebApplication2.Models
@model   System.Tuple<Person, List<Survey>>

<hr />
<h1>Surveys</h1>

<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />

@{int i = 1;}
@foreach (var survey in Model.Item2) {
    using (Html.BeginForm()) {
        <h2>Survey @(i)</h2>
        <p />
        @Html.EditorFor(x => survey.Questions)
        <button class='mybutton' type='button' onclick="javascript:SubmitClick(@Model.Item1.Id,  @Newtonsoft.Json.JsonConvert.SerializeObject(survey));">Save Survey</button>
    }
    i++;
    <hr style="background-color:rgb(126, 126, 126);height: 5px" />
}
<hr />

The script. I think I had to pass variable directly as I have many surveys and many buttons:

function SubmitClick(pid, sid) {     
    var url = '@Url.Action("SubmitSurvey", "Person")';
    var objSurvey = $.parseJSON(sid);
    $.post(url, { personId: pid, survey: objSurvey }, function (data) {
        alert('updated person' + pid + ' survey ' + sid);
    });
}

I get:

A first chance exception of type 'System.Web.HttpException' occurred in System.Web.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in Newtonsoft.Json.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in System.Web.Mvc.dll
A first chance exception of type 'Newtonsoft.Json.JsonSerializationException' occurred in System.Web.Mvc.dll

The class Survey looks like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication2.Models {


    public class Survey {
        public int Id { set; get; }
        public virtual ICollection<Question> Questions { set; get; }

        public Survey() { }
        public Survey(Survey survey) {
            Id = survey.Id;
            Questions = new List<Question>();
            System.Diagnostics.Debug.WriteLine("SURVEY " + survey.Questions == null);
           foreach (Question question in survey.Questions) {
                Questions.Add(new Question(question));
            }
        }
    }
    public class Question {
        public int Id { set; get; }
        public string QuestionText { set; get; }
        public virtual ICollection<Answer> Answers { set; get; }
        public virtual Survey Survey { get; set; }
        public string SelectedAnswer { set; get; } //this field is SET after clicking SAVE button

        public Question() { }

        public Question(Question question) {
            Id = question.Id;
            QuestionText = question.QuestionText;
            Answers = question.Answers;
            Survey = question.Survey;
            SelectedAnswer = "";
        }
    }
    public class Answer {
        public int Id { set; get; }
        public string AnswerText { set; get; }
        public virtual Question Question { get; set; }
        public virtual ICollection<Person> Persons { get; set; }
    }
}

Why do you want to send back the @survey object ? If @survey has property Answer and its value is empty, then the user makes changes the Answer input <input name="Answer" type="text" /> in the UI into Some Value, the submit button will not send the Some Value, but empty value, what you need to do is serialize the form, not sending the @survey — Yuliam Chandra
– Yuliam Chandra, Commented Sep 1, 2014 at 6:20

ntl · Accepted Answer · 2014-08-31 20:33:41Z

2

You cannot just pass C# object to JS and post it back.

You should:

Convert your object to JSON and pass it to JS. I advise to use Newtonsoft.JSON for it.

controller:

string json = JsonConvert.SerializeObject(survey);

markup:

<button class='mybutton' type='button' onclick="javascript:SubmitClick(@Model.Item1.Id, @json);">Save Survey</button>

Then from JS you should post JSON to your MVC controller and MVC will deserialize it your C# object.

markup:

function SubmitClick(pid, sid) {     
    var objSurvey = $.parseJSON(sid);
    var url = '@Url.Action("SubmitSurvey", "Person")';
    $.post(url, { personId: pid, survey: objSurvey }, function (data) {
        alert('updated' + pid);
    });
}

controller:

  public void SubmitSurvey(int personId, Survey survey) {       }

UPDATED:

Your Survey entity cannot be serialized correctly because of cycle references between classes. So you have few options here:

use [JsonIgnore] attribute to ignore backreferences. (So you should mark Survey property inside Question class with this attribute, Question property inside Answer class and so on) Please keep in mind that these fields will be not serialized to JS and deserialized back to C# objects.
create separate model without cycle references for serialization and use it when convert to JSON.

edited Aug 31, 2014 at 20:33

answered Aug 31, 2014 at 17:41

ntl

1,2991 gold badge10 silver badges16 bronze badges

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

4 Comments

Yoda Over a year ago

I posted an edit to the OP. I didn't post it before because I wanted to keep the question simple. The deal is that I have many surveys in the button and I get serialization errors maybe due virtual properties. Please have a look at edit.

ntl Over a year ago

Just wondering why did you write @Newtonsoft.Json.JsonConvert.SerializeObject(Model) and not @Newtonsoft.Json.JsonConvert.SerializeObject(survey) in your razor markup? You should pass serialized survey and not whole Model.

Yoda Over a year ago

You are right I am just dealing with this problem for almost a week now. I made a mistake. I corrected it edited the OP I get the same errors. I commented the content of function SubmitClick(pid, sid) { to be sure that exceptions are thrown here ` <button class='mybutton' type='button' onclick="javascript:SubmitClick(@Model.Item1.Id, @Newtonsoft.Json.JsonConvert.SerializeObject(survey));">Save Survey</button>` Maybe lazy loading is a reason? I'll try to make try catch inside a view.

Yoda Over a year ago

I don't know how to make try-catch around html in Razor view. It won't help.

Manish Mishra · Accepted Answer · 2014-08-31 17:43:13Z

1

You are doing it wrong.

Basically when you do @survey, you are looking at a server side code. At the client side, this @survey, which is an instance of a strongly typed clr class, is converted to string, and you know what happens when you convert and object to string, you get its Type in string i.e

@survey.ToString() == "WebApplications2.Models.Survey"

obviously it is wrong cause, your button tag's markup, at the end, effectively becomes :

<button class='mybutton' type='button' 
         onclick="javascript:SubmitClick(@Model.Item1.Id, 
                                     WebApplications2.Models.Survey);">
        Save Survey
</button>

You should basically first serialize your @survey object at the server side and store it in a hidden variable i.e.

@Html.Hidden("hdnSurvey", Newtonsoft.Json.JsonConvert.SerializeObject(Model))

and use this hidden variable inside your javascript

i.e.

function SubmitClick(pid) {     
    var objSurvey = $.parseJSON( $('#hdnSurvey').val());

    var url = '@Url.Action("SubmitSurvey", "Person")';

    $.post(url, { personId: pid, survey: objSurvey }, function (data) {
        alert('updated' + pid);
    });
}

answered Aug 31, 2014 at 17:43

Manish Mishra

12.4k5 gold badges40 silver badges65 bronze badges

3 Comments

ntl Over a year ago

I am wondering why do you use hidden field for JSON? I think you can pass it directly to JS function and it will parsed as JS object, right?

Manish Mishra Over a year ago

you are correct absolutely. just to make it simple and to make a point that, it has nothing to do with the way you pass it or the javascript function

Yoda Over a year ago

I posted an edit to the OP. I didn't post it before because I wanted to keep the question simple. The deal is that I have many surveys in the button and I get serialization errors maybe due virtual properties. Please have a look at edit.

Yuliam Chandra · Accepted Answer · 2014-09-01 07:35:29Z

Sending back the @survey variable is pointless, the changes from the UI will not be reflected from the variable, but from HTML input, what you really need is serializing the form.

Here is a complete solution for what you really need.

Model

public class Person
{
    public int Id { set; get; }
}
public class Survey
{
    public int Id { set; get; }
    public virtual ICollection<Question> Questions { set; get; }
}
public class Question
{
    public int Id { set; get; }
    public string QuestionText { set; get; }
    public virtual ICollection<Answer> Answers { set; get; }
    public int SelectedAnswerId { set; get; } // Notice that I change it into int not string
}
public class Answer
{
    public int Id { set; get; }
    public string AnswerText { set; get; }
}

Controller

public ActionResult Index()
{
    var person = new Person { Id = 1 };
    var survey = new Survey
    {
        Id = 12,
        Questions = new List<Question> 
        {
            new Question 
            {
                Id = 34,
                QuestionText = "What is your favorite language?",
                Answers = new List<Answer>
                {
                    new Answer { Id = 56, AnswerText = "A#" },
                    new Answer { Id = 57, AnswerText = "B#" },
                    new Answer { Id = 58, AnswerText = "C#" }
                }
            }
        }
    };

    var model = new Tuple<Person, List<Survey>>(person, new List<Survey> { survey });
    return View(model);
} 

[HttpPost]
public ActionResult SubmitSurvey(int personId, Survey survey)
{
    return Json(new { success = true });
}

Index.cshtml

@model  Tuple<Person, List<Survey>>
@{
    ViewBag.Title = "Index";
}

<h2>Surveys</h2>

@{int i = 1;}
@foreach (var survey in Model.Item2)
{
    using (Html.BeginForm())
    {
        <h3>Survey @(i++)</h3>
        @Html.HiddenFor(x => survey.Id)
        @Html.EditorFor(x => survey.Questions)
        <button class="mybutton" type="button">Save Survey</button>
    }
}

@section Scripts
{
    <script>
        $(".mybutton").click(function () {
            var personId = "@Model.Item1.Id";
            var survey = $(this).closest("form").serialize();
            var data = survey + "&personId=" + personId;
            $.ajax({
                type: "POST",
                url:  "@Url.Action("SubmitSurvey", "Survey")", 
                data: data,
                traditional: true,
                success: function (data) {
                    alert("submitted :" + data.success);
                }
            });
        });
    </script>    
}

EditorTemplates/Question.cshtml

@model Question
<h3>@Model.QuestionText </h3>

@Html.HiddenFor(x => x.Id)
@foreach (var a in Model.Answers)
{
    <label>@Html.RadioButtonFor(b => b.SelectedAnswerId, a.Id) @a.AnswerText</label>
}

Result

If the user selected B# on the first survey on the first question, the submitted survey will return SelectedAnswerId as 57. The other properties like Answers and QuestionText are null and they're not important for saving so let it be.

Result

Collectives™ on Stack Overflow

Passing local variable in Razor view by JavaScript to java script function and then to C# method

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related