Data Binding in ASP.NET MVC

Question

I know it would be a basic question but I'm a newbie to ASP.Net MVC. I have fetched data from database using LINQ but there is an issue. I wanna bind that data with input fields of a customized webform. (I'm using MVC). I wanna populate the input fields of webform with fetched data. I'm using EF Database first approach. My Controller and view is attached.

Controller ActionMethod

public class HomeController : Controller
{
    public ActionResult Index()
    {
        AutoRTGSEntities_1 dc = new AutoRTGSEntities_1();
        //dc.policies.Where(cb => cb.Section_Key.Contains("SenderBIC"));
        return View(dc.policies.Where(cb => cb.Policy_Section.Contains("RTGS")).ToList()); //get RTGS policy section data

    }
}

View

@model IEnumerable<Swift_MT_103.policy>
@{
    ViewBag.Title = "Home Page";
}
<div> @Model{ @Html.TextBoxFor(x => x.data_Value)) } </div> 
<div> <input type="text" name="ReceiverBIC" id="ReceiverBIC" /> </div> 

Rest is HTML and CSS. Snap is attached.

Answer 1

Here's a very basic example of how to this. Let's say you have following class:

public class User
{
    public int Id { get; set; }

    [Display(Name = "Name")]
    public string Name { get; set; }

    [Display(Name = "E-mailaddress")]
    public string E-mail { get; set; }
}

In the controller you get the user:

public ActionResult Index(int id)
{
    var user = Db.Users.FirstOrDefault(x => x.Id == id);
    if(user != null)
    {
        return View(user);
    }

    //Return to the 'Error' view as no user was found
    return View("Error");
}

You also need a View to show everything on screen. Make it a strongly typed view, this way you can pass a Model to it. This class will hold all data you want to pass to the view. Code of the view:

//This line lets the view know which class represents the model
@model User

@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name)

@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name)

Using the Razor syntax instead of plain HTML it is very easy to construct and bind your form elements to the corresponding data. In this case the label will show the value of the Display attribute in the User class and the values of the user will be filled in the textboxes.

More reading:

• Getting started with ASP.NET MVC 5
• ASP.NET MVC Overview

Update:

In case you have a list of objects, you need to enumerate them in the view:

@model IEnumerable<string>

@foreach (var value in Model)
{
    <div>@value</div>
}

And if the model is a class and has a property that is a list:

//Let's say a user has lots of names
public class User
{
    public int Id { get; set; }
    public List<string> Names { get; set; }
}

//View:
@model User

@Html.TextBoxFor(m => m.Id)

@foreach (var name in Model.Names)
{
    <div>@name</div> 
}

Answer 2

Try to implement a correct ASP.NET MVC architecture. To get this completed, you'll need to use proper Razor (.cshtml type) Syntax in your Views. Best practice:

1. Create a dedicated ViewModel class in the Model directory. You might call it CustomerCreditTransferViewModel for example. It should contain all Properties you want to display/edit anywhere on the page.

2. Once you selected your data from your DBContext in your Action, create an instance of CustomerCreditTransferViewModel and populate all fields from the result.

3. Update your View to use @model CustomerCreditTransferViewModel instead of Swift_MT_103.policy (believe me, this is going to make your live much easier in future)

4. Copy-paste your raw HTML Code into the page and start looking for all Fields you want to bind, e.g. Text fields (<input type="text" name="accountno" value="" />) and replace them with the Razor Syntax for Data Binding (@Html.TextBoxFor(x => x.AccountNo)). If done correctly, they should be populated now.

5. Next step is probably the POST. Follow the base MVC Post technique from the Tutorials. Ensure that the Posted Value is of type CustomerCreditTransferViewModel) again, so you can easily validate values and map back to type of Swift_MT_103.policy.