在控制器MVC C＃中生成动态的局部视图

Question

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 ?

Answer 1

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)

Answer 2

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.