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.

That is what you want to do but you have not stated what is the problem. What have you tried and where are you having issues? — Nkosi
– Nkosi, Commented Nov 21, 2017 at 10:15
Data Binding works best through Razor Views and dedicated View Models. Without any of those, you'll have a very hard time binding the data. If you have HTML only, you cannot bind (on server side). I'd suggest to grab a copy of the HTML and replace all Input Fields (e.g. <input type="text" name="accountno" value="something" /> with Razor counterparts, e.g. @Html.TextBoxFor(x => x.AccountNo)) — thmshd
– thmshd, Commented Nov 21, 2017 at 10:23
@AhmadBinShafaat Show a snippet of the raw code for the view. (for example, the first 4 fields at the top) The suggestion by thmshd is accurate. — Nkosi
– Nkosi, Commented Nov 21, 2017 at 10:31
You should edit your question and add the html code of the first 4 textboxes at the top, then mention something like "I want to fill UnitID textbox with the value from column x of policy table". That should be enough to clarify what you need. The solution is the suggestion by @thmshd — ekad
– ekad, Commented Nov 21, 2017 at 10:35

Abbas · Accepted Answer · 2017-11-21 10:48:23Z

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:

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> 
}

I've already used this line @model IEnumerable<Swift_MT_103.policy> at the top. Now what would be the proper way to populate a textbox? ` @model policy @Html.TextBoxFor(x=> x.data_Value))` is not working.

thmshd · Accepted Answer · 2017-11-21 10:41:24Z

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:

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.
Once you selected your data from your DBContext in your Action, create an instance of CustomerCreditTransferViewModel and populate all fields from the result.
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)
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.
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.

Collectives™ on Stack Overflow

Data Binding in ASP.NET MVC

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related