Как изменить элемент option раскрывающегося списка на выбранный в соответствии со значением в ViewData?

Question

У меня есть ViewData["Mother"] и который содержит данные Материнской сущности. Я хочу установить соответствующий option элемент drop-down list на selected в соответствии со значением в моем ViewData["Mother"]. Например, если ViewData["Mother"] равно Buddhism, элемент option, содержащий значение Buddhism, должен быть установлен на selected.

Mother.cs

public class Mother
{
    [Key,Required,Display(Name = "NIC"),MaxLength(12)]
    public string NIC { get; set; }
    [Required,Display(Name = "Full Name"),MaxLength(100)]
    public string FName { get; set; }
    [MaxLength(15)]  public string Religion { get; set; }
}

controller.cs

public IActionResult Index(string id)
{
    if (!string.IsNullOrEmpty(id))
    {
       var Mother = _context.Mothers.Where(p => p.NIC == id).FirstOrDefault();
       ViewData["Mother"] = Mother;
    }
    else
    {
        var Mother = _context.Mothers.Where(p => p.NIC == "5861V").FirstOrDefault();
        ViewData["Mother"] = Mother;
    }
    return View();
}

Index.cshtml;

@{ var m = ViewData["Mother"] as School_Mgt.Models.Students.Mother; }
@section Scripts{<script> $(function () { $("select#ReligionM").val("@m.Religion");})</script>}
<label asp-for="ReligionM">Religion</label>
<select asp-for="ReligionM" name="ReligionM" >
    <option>Please select your Religion</option>
    <option value="Buddhism">Buddhism</option>
    <option value="Catholic">Catholic</option>                                                  
</select> 
...                                           

Answer 1

Вы можете использовать jquery, чтобы получить значение ViewData ["Mother"] и позволить элементу управления выбрать это значение по умолчанию.

Измените ваше представление следующим образом:

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>Index</h1>

@{ var m = ViewData["Mother"] as School_Mgt.Models.Students.Mother;  }
@section Scripts{
    <script>
        $(function () {
            $("select#ReligionM option").each(function () {
                if ($(this).val()== "@m.Religion") {
                    $("select#ReligionM").val("@m.Religion");
                }
            }) 
        })</script>
}
<label asp-for="FNameM">Name in full</label>
<input asp-for="FNameM" name="FNameM" type="text" value="@m.FName">

<label asp-for="ReligionM">Religion</label>
<select asp-for="ReligionM" name="ReligionM">
    <option>Please select your Religion</option>
    <option value="Buddhism">Buddhism</option>
    <option value="Catholic">Catholic</option>
</select>