如何使用 viewmodel 将一些 id 从表单发送到控制器

Question

我的.net mvc程序中有一个索引页面，它有两个部分用于显示联系人和添加联系人。 我的数据库中的联系人和组具有多对多关系。我已经能够使用视图模型显示每个联系人的组，但在添加部分中，我无法为每个联系人选择组。我将把我的代码放在下面，谢谢你的帮助。

public class ContactIndexViewModel
{

    public List<Contact>? Contacts { get; set; }
    public List<Group>? Groups { get; set; }
    public List <ContactGroup>? ContactGroups { get; set; }
    public Contact? Contact  { get; set; }
    public List<ContactGroup>? SelectedContactGroups { get; set; }
}

@using PhoneBook.Mazaheri.Models
@model ContactIndexViewModel


<div class="col-lg-4 inp">
    <h5 class="mt-2">اضافه کردن مخاطب جدید</h5>
    <form action="/Contact/CreateContact" method="post" id="myForm">
        <div class="form-group">
            <label for="contactName">نام مخاطب:</label>
            <input onblur="validateName()" class="form-control mb-3 mt-3" id="contactName" name="Contact.ContactName" type="text" placeholder="نام مخاطب">
            <div id="nameAlert" class="alert alert-danger text-justify p-2" style="display: none;">لطفاً نام را وارد کنید.</div>
        </div>
        <div class="form-group">
            <label for="contactPhone">شماره تماس:</label>
            <input onblur="validatePhone()" class="form-control mb-3" id="contactPhone" name="Contact.PhoneNumber" type="tel" placeholder="شماره تماس">
            <div id="phoneAlert" class="alert alert-danger text-justify p-2" style="display: none;">لطفاً یک شماره تماس معتبر وارد کنید.</div>
        </div>
        <div class="form-group">
            <label for="selectedGroups">انتخاب گروه‌ها:</label>
            <select class="form-control mb-3" id="selectedGroups" name="SelectedContactGroups" multiple>
                @foreach (var group in Model.Groups)
                {
                    <option value="@group.Id">@group.GroupName</option>
                }
            </select>
        </div>
        <button type="submit" class="btn btn-info w-100 btn1 mt-3">افزودن</button>
        <div id="statusMessage" style="display: none;"></div>
    </form>
</div>

[HttpGet]
 public async Task<IActionResult> Index()
 {
     var contacts = await _contactRepository.GetAllAsync();
     var groups = await _groupRepository.GetAllAsync();
     var contactGroups = await _contactGroupRepository.GetAllAsync();

     var contactIndexModel = new ContactIndexViewModel()
     {
         Contacts = contacts.ToList(),
         Groups = groups.ToList(),
         ContactGroups = contactGroups.ToList(),
     };
     return View(contactIndexModel);
 }



 [HttpPost]
 public async Task<IActionResult> CreateContact(ContactIndexViewModel model)
 {
     if (!ModelState.IsValid)
     {
         return BadRequest(ModelState);
     }

     var newContact = model.Contact;
     await _contactRepository.InsertAsync(newContact);

     foreach (var groupId in model.SelectedContactGroups)
     {
         var contactGroup = new ContactGroup { ContactId = newContact.Id, GroupId = groupId.GroupId };
         await _contactGroupRepository.InsertAsync(contactGroup);
     }

     return RedirectToAction("Index");
 }

Answer 1

您面临问题，因为您如何处理表单和控制器中的

SelectedContactGroups

。在您的代码中，看起来

SelectedContactGroups

被声明为视图模型中的

ContactGroup

列表，但它应该是一个列表的

int

，代表所选群组的 ID。您可以尝试下面的代码，它将帮助您为每个联系人选择群组。

将 ViewModel 设置为使用

List<int>

而不是

List<ContactGroup>

：

public class ContactIndexViewModel
{
    public List<Contact>? Contacts { get; set; }
    public List<Group>? Groups { get; set; }
    public List<ContactGroup>? ContactGroups { get; set; }
    public Contact? Contact { get; set; }
    public List<int>? SelectedGroupIds { get; set; }
}

表单：（更改选择输入以绑定所选组 ID）

<div class="col-lg-4 inp">
    <h5 class="mt-2">اضافه کردن مخاطب جدید</h5>
    <form action="/Contact/CreateContact" method="post" id="myForm">
        <div class="form-group">
            <label for="contactName">نام مخاطب:</label>
            <input onblur="validateName()" class="form-control mb-3 mt-3" id="contactName" 
                name="Contact.ContactName" type="text" placeholder="نام مخاطب">
            <div id="nameAlert" class="alert alert-danger text-justify p-2" style="display: none;">لطفاً نام را وارد کنید.</div>
        </div>
        <div class="form-group">
            <label for="contactPhone">شماره تماس:</label>
            <input onblur="validatePhone()" class="form-control mb-3" id="contactPhone" 
                name="Contact.PhoneNumber" type="tel" placeholder="شماره تماس">
            <div id="phoneAlert" class="alert alert-danger text-justify p-2" style="display: none;">لطفاً یک شماره تماس معتبر وارد کنید.</div>
        </div>
        <div class="form-group">
            <label for="selectedGroups">انتخاب گروه‌ها:</label>
            <select class="form-control mb-3" id="selectedGroups" name="SelectedGroupIds" multiple>
                @foreach (var group in Model.Groups)
                {
                    <option value="@group.GroupId">@group.GroupName</option>
                }
            </select>
        </div>
        <button type="submit" class="btn btn-info w-100 btn1 mt-3">افزودن</button>
        <div id="statusMessage" style="display: none;"></div>
    </form>
</div>

控制器动作：

[HttpPost]
public async Task<IActionResult> CreateContact(ContactIndexViewModel model)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    var newContact = model.Contact;
    if (newContact is not null)
    {
        await _contactRepository.InsertAsync(newContact);

        if (model.SelectedGroupIds != null)
        {
            foreach (var groupId in model.SelectedGroupIds)
            {
                var contactGroup = new ContactGroup { ContactId = newContact.Id, GroupId = groupId };
                await _contactGroupRepository.InsertAsync(contactGroup);
            }
        }
    }

    return RedirectToAction("Index");
}