If you want to pass multiple variables, simply write another variable and access the variable name on the page to get data.
Interestingly, it seems that viewbag and viewdata are different representations of the same thing. For example, we define:
But in fact, these are not what I want to talk about in this article. Next I will go to the topic. If I access the data in JavaScript code, I will further explain how to access the data uploaded by the action to the page.
In the script code surrounded by <SCRIPT>, you naturally want to use the same syntax for access. We use viewdata for transmission:
public ActionResult Index() { ViewData["message"] = "Data from server."; return View(); }
Then in the JS Code, it looks like this:
<script > $(function() { var data = <%:ViewData["message"] %>; }) </script>
Then an error is reported during the migration,
But what's amazing is that we have completed the task. But in fact, it is incorrect to take a closer look, because the statement after the equal sign is not a normal JavaScript statement.
To avoid errors and make the code normal, we need to enclose them in quotation marks, so it looks like this:
var data = ' <%:ViewData["message"] %>';
This is enough for simple data. However, generally, actions return data of complex types such as models.
First, for convenience, create a class file named personalmodel under the model folder. For simplicity, the content is like this:
public class PersonModel { public string Name { get; set; } public int Age { get; set; } }
A simple object contains only one name attribute of the string type and one age attribute of the integer type.
Next, write another method to generate some static data. In actual cases, the data may be retrieved from the database. For convenience of calling this method, I wrote it in the homecontroller class, which looks like this:
static List<PersonModel> DummyData() { var data = new List<PersonModel>() { new PersonModel() { Name = "Tom", Age = 20 }, new PersonModel() { Name = "Cat", Age = 5 } }; return data; }
Then we modify the index action to let it return data.
public ActionResult Index() { var data=DummyData(); return View(data); }
Finally, we will go to the JS Code segment on the page to receive it.
<script > $(function() { var model = <%= new JavaScriptSerializer().Serialize(Model) %>; debugger; }) </script>
A debugger is added to facilitate viewing data in the debugging mode in the browser.
Then, go to the browser to check whether the data is obtained (remember that the browser is in debugging mode and press F12 to enter ).
We successfully obtained the transmitted data in the js code snippet and converted the sequence into JSON format.
Then, you can use a statement similar to the following.
<script > $(function() { var model = <%= new JavaScriptSerializer().Serialize(Model) %>; alert(model[0].Name); debugger; }) </script>
The above is only about access in JS. In fact, this is not the main requirement, we just get used to the page usage and don't know what to do when we suddenly need to access the data in JS.
How to access the data of this collection type on the page. We all know the situation when a model is transferred to the page.
For example, modify the index action so that it returns only one data record. Of course, the type is personmodle.
public ActionResult Index() { //var data=DummyData(); var data = new PersonModel() { Name = "Tom", Age = 20 }; return View(data); }
Note that the previous data (commented out) is of the List <personmodel> type, which is a collection type, but is of the personmodle type. Understanding this is very important for us to obtain data correctly on the page.
Then modify the page to a strong type, and then receive the data (as you can see, when we want to obtain data in JS, the page is not required to be a strong type ).
The previous page type looks like this:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
Now we want to change it to the following:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication17.Models.PersonModel>" %>
Then we can use the transmitted data on the page, using a syntax similar to this:
<p> Name:<%= Html.DisplayFor(model=>model.Name) %> Age:<%= Html.DisplayFor(model=>model.Age) %></p>
When data of the set type is passed, it cannot be accessed in this way. You need to traverse the set and retrieve a single piece of data before using it.
Next we will look at the situation of the set type.
Modify the data returned by index action to the original one:
public ActionResult Index() { var data=DummyData(); return View(data); }
Then modify the receiving type of the page to the following:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication17.Models.PersonModel>>" %>
Finally, on the page, we need to traverse this set to obtain data. We can use a syntax like this:
<% foreach(var item in Model) { %> <p> Name:<%= Html.DisplayFor(n=>item.Name) %> Age:<%= Html.DisplayFor(n=>item.Age) %> </p> <% } %>
Here we just briefly talk about the transmission of data from the server to the page in MVC. What is more difficult is to bind the data to the model by sending the data back to the server. Of course, if you use a form and directly submit a submit, all the things are done for you, and the model is easily bound. However, if your page has multiple models, you don't want to use submit but want to write Ajax backhaul. How can we get such data transmission on the server... I will talk about it later.
Articles for reference:
- ASP. net mvc using viewdata in JavaScript (stackoverflow)
- Using ASP. net mvc V2 editorfor and displayfor with ienumerable <t> generic types