I need to generate a dynamic form using MVC.
I'm planning to create the HTML code within the Action of a Controller(based on database values) and pass it to the View as a Partialview.
To accomplish this task I need to create a dynamic view inside the Action. So I could add all the html codes within that and pass it to the view as a Partialview.
Is there any way to do that ?
Or
Is there any other way in MVC to dynamically generate html elements ?
In that action, you can return html
contents created on the fly. Just use Content()
as bellows
return Content("<form><input value='"+valueFromDb+"'/>...</form>");
but this is not a good practice so, you need to create a partial view and then return it using
//var modelFromDb=db.Table.FirstOrDefault();
return PartialView("MyPartial",modelFromDb);
EDITS: To generate code for your partial, you need to right click in your controller action and choose Add View type MyPartial as View name and then check the Add Strongly Typed View ... you will need to precise the model class and the template to be used (list,delete,edit,create or empty)
I don't think generating code in controller is a good idea, things will get messy.
If you are saving the fields in the database, you must be saving a type against each field.
Example:
Field Types Table
TypeId Name
1 TextBox
2 DropDown
Fields Table
FieldId TypeId (FK) IsEdit FormId (FK) Style
1 1 1 1 color: red
2 2 1 1 NULL
When reading from database you can convert these to a list of fields
public class Field
{
// Common Properties
public string Style {get;set;}
public int TypeId {get;set;}
public string Name {get;set;
}
then for each type you have in DB you can create a class and derive from Field
public class DropDown : Field
{
public Dictionary<string, string> Values {get;set;}
}
public class TextBox : Field
{
public string Value {get;set;}
}
Then when reading from database pass each through a Factory class
// READ from DB
var model = new List<Field>();
var fields = dbContext.Fields.Where(s => s.FormId == 1);
foreach(var field in fields){
model.Add(FieldFactory(field));
}
// PASS THROUGH FACTORY
public Field FieldFactory(Form form){
switch(field.TypeId)
{
case 1: // Textbox --> you can use enum
return new TextBox(SET_VALUES);
}
}
Then create a partial View eg form.cshtml
, pass list of field as model
return PartialView("form", new List<Field>());
Then handle the field type in form.cshtml
@model List<Field>
@foreach(var field in Model){
switch(field.TypeId){
case 1: // TextBox
@Html.Partial("TextBox", (TextBox)field)
break;
case 2:
@Html.Partial("DropDown", (DropDown)field)
break;
}
}
Create a partial view for each field type:
TextBox.cshtml:
@model TextBox
<input type ="text" name = "@Model.Name" stlye ="@Model.Style" value = "@Model.Value" />
DropDown.cshtml
@model DropDown
@Html.DropDownListFor(m => m.FieldId, new SelectList(Model.Values, "Value", "Key")
With this method you add JavaScript and jQuery code to each field PartialView.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.