asp.NET mvc, get model list values from view

Question

I am new to mvc and am trying to do something like in the below image (im not using partial views). I have an IEnumerable property on Model Like in this image, (i have not enough reputation to show image directly)

but on controller if i put FormCollection as parameter to accepting post method when i process same name fields i get an extra character ',', which might be also used by user...

Any idea....

[EDIT] My view

@model Models.Question
@{
    ViewBag.Title = "Add";
}

Add


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()


    Question
    
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.SurveyId)
    
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        
    

    
        @Html.LabelFor(model => model.QuestionTypeId, "Question type", htmlAttributes: new { @class = "control-label col-md-2" })
        
            @Html.DropDownListFor(model => model.QuestionTypeId, new SelectList(ViewBag.QuestionTypes, "QuestionTypeId", "Name"), new { @class = "form-control col-md-10" })
            
            @Html.ValidationMessageFor(model => model.QuestionTypeId, "", new { @class = "text-danger" })
        
    
    
        @Html.LabelFor(model => model.Answers, "Options", htmlAttributes: new { @class = "control-label col-md-2" })
        
            @Html.ValidationMessageFor(model => model.Answers, "", new { @class = "text-danger" })
        
    

    
        @Html.LabelFor(model => model.Sort, htmlAttributes: new { @class = "control-label col-md-2" })
        
            @Html.EditorFor(model => model.Sort, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Sort, "", new { @class = "text-danger" })
        
    

    
        @Html.LabelFor(model => model.Mandatory, htmlAttributes: new { @class = "control-label col-md-2" })
        
            
                @Html.EditorFor(model => model.Mandatory)
                @Html.ValidationMessageFor(model => model.Mandatory, "", new { @class = "text-danger" })
            
        
    

    
        
            
        
    

}


@Html.ActionLink("Back to List", "Question", "Survey", new { id = Model.SurveyId }, null)


@section Scripts {
@Scripts.Render("~/bundles/jqueryval", "~/Scripts/QuestionAdd.js")
}

Controller

[HttpGet]
    public ActionResult Add(long id)
    {
        var question = new Models.Question();
        question.SurveyId = id;
        ViewBag.QuestionTypes = BLL.Questions.GetQuestionTypes();
        return View(question);
    }
    [HttpPost]
    public ActionResult Add(FormCollection coll)
    {
        if (ModelState.IsValid)
        {
            var question = new Models.Question();
            question.Name = coll["Name"];
            byte qid = 0, sort = 0;
            bool mandatory = false;
            byte.TryParse(coll["QuestionTypeId"], out qid);
            byte.TryParse(coll["Sort"], out sort);
            bool.TryParse(coll["Mandatory"], out mandatory);
            question.QuestionTypeId = qid;
            question.Sort = sort;
            question.Mandatory = mandatory;
            foreach (var answer in coll["Answers"])
                question.Answers.Add(new Models.Answer() { Value = answer + "" });
            if (question != null)
            {
                if (BLL.Questions.Insert(question) != null)
                    ViewBag.Message = "Successfully inserted";
                else
                    ViewBag.Message = "Insert could not be done";
                return RedirectToAction("Index", "Question", new { questionId = question.QuestionId });
            }
        }
        return View();
    }

When (+) clicked

$('#allAnswers').append(
    '' +
    ' ' +
    '' +
    ' ' +
    '
 ');

Wheels73 · Accepted Answer

As discussed.. here is how i would approach this.

I have a view model to hold the questions and answers and the selected question to which we will be adding answers.

public class CurrentViewModel
{
    public string QuestionSelected { get; set; }
    public List Questions { get; set; }
    public List Answers { get; set; }
}

Then in your controller we have an action to return the view, an action to get the answers for the selected question, an action to add a new answer for the selected question and also a save method which just demonstrates the final model content posted.

public class TestController : Controller
    {
        public ActionResult Test()
        {
            var model = new CurrentViewModel()
            {
                Questions = new List()
                {
                    new SelectListItem()
                    {
                        Text = "Question 1",
                        Value = "Question 1"
                    },

                    new SelectListItem()
                    {
                        Text = "Question 2",
                        Value = "Question 2"
                    }
                },
                Answers = new List()
            };

            return View("Test", model);
        }

        public PartialViewResult GetAnswers(CurrentViewModel model)
        {
            model.Answers = new List();
            //model.Answers = Get Answers from some service based on QuestionSelected?!
            model.Answers.Add("Answer 1");
            model.Answers.Add("Answer 2"); //Add manuall for example
            return PartialView("_Answers", model);
        }

        public PartialViewResult AddAnswer(CurrentViewModel model)
        {
            model.Answers.Add("Add answer here...");
            return PartialView("_Answers", model);
        }

        public ActionResult SaveQuestionsAndAnswers(CurrentViewModel model)
        {
            if (model.Questions.Count == 0)
            {

            }

            return View("Test", model);
        }

    }

Then we have a main view for showing the questions dropdown and a partial view that will show us the answers.

Main View

@model TestMVC.Models.CurrentViewModel

    @{
        ViewBag.Title = "Test";
    }

    
    
    

    
        
            Q & A
        

        @using (Html.BeginForm("SaveQuestionsAndAnswers", "Test", FormMethod.Post, new { id = "frmQandA" }))
        {
            @Html.Label("lblQ", "Questions", new { @class = "form-control inline" })
            @Html.DropDownListFor(model => model.QuestionSelected, Model.Questions, "Select--", new { @class = "form-control inline", id="ddQuestions" })

            
                @Html.Partial("_Answers")
            

        
            
        

        }

Partial View

@model TestMVC.Models.CurrentViewModel






    @for (var counter = 0; counter <= (Model.Answers.Count - 1); counter++)
    {
        @Html.TextBoxFor(model => model.Answers[counter], new {@class = "form-control inline"})
    }

I've tested this locally and it works. In a nutshell, when we need a new answer adding to the model, we add it in server side so we can then bind to the model in the browser. We do this via an Ajax call on the change event of the questions drop down. The partial view iterates through each answer via a counter which generates a unique id and textbox for each answer. Adding a new answer is also achieved via ajax. These can then all be posted back.

Hope that helps.

asp.NET mvc, get model list values from view

Answers (1)

Related Questions