.net core checkbox model binding from view

Question

I am new to programming, your help in English is much appreciated. I have single field in my ms sql database, say "city" and its datatype is "string". And I have check boxes in my asp.net core mvc for "Sydney", "London", "Berlin","Delhi". Now when a user selects "Sydney" and "London", I want the data to be stored (under the "city") as "sydney,london". Basically I want to serialize (comma seperated) the view data and store it under the field and de-serialize it later to display it in the view. I came as for as, storing one value under the "city" from view and retrieving it and then displaying back in my view. Not sure how to do multiple values. I am not sure what/how to do it. Any guidance will be much appreciated.

Below is the view code how I store my single values,

 <div class="form-group my-2">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="Sydney"> Sydney
                </label>
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="London"> London
                </label>
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="Berlin"> Berlin
                </label>
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off"  value="Delhi"> Delhi
                </label>
               </div>
        </div>

And my model file has the field declared like below,

public string city {get; set;}

And my controller receive the item like this,

public async Task<IActionResult> Edit(string id, [Bind("city")] RNote rNote)
{
  return View(rNote);
}

If I have to read some topics to understand your answer, please list it in your answer. Thank you.

[I can] store one value under the "city" from view and retrieving it and then displaying back in my view. Not sure how to do multiple values. - how about showing your code for storing the single value? — stuartd
– stuartd, Commented Feb 10, 2020 at 0:06
@stuartd I have added the codes. Am I missing anything else crucial? — Pal
– Pal, Commented Feb 10, 2020 at 0:23

Xueli Chen · Accepted Answer · 2020-02-10 10:02:05Z

For binding multiple values to a string-type property , you could customize a model binding like below:

public class CustomModelBinder: IModelBinder
{
    public Task BindModelAsync(ModelBindingContext bindingContext)
    {
        if (bindingContext == null)

            throw new ArgumentNullException(nameof(bindingContext));
        var values = bindingContext.ValueProvider.GetValue("city");

        if (values.Length == 0)
            return Task.CompletedTask;

        var result = new RNote
        {
            city = values.ToString()
        };
          bindingContext.Result = ModelBindingResult.Success(result);

        return Task.CompletedTask;
    }

}

Controller:

public async Task<IActionResult> Edit(int id, [ModelBinder(BinderType = typeof(CustomModelBinder))] RNote rNote)

View:

<form asp-action="Edit">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Id" />
        <div class="form-group my-2">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="Sydney"> Sydney
                </label>

                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="London"> London
                </label>
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="Berlin"> Berlin
                </label>
                <label class="btn btn-outline-primary">
                    <input type="checkbox" name="city" autocomplete="off" value="Delhi"> Delhi
                </label>
            </div>
        </div>
        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
</form>

Reference:

https://learn.microsoft.com/en-us/aspnet/core/mvc/advanced/custom-model-binding?view=aspnetcore-3.1

Collectives™ on Stack Overflow

.net core checkbox model binding from view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related