मैं वर्तमान में ASP.NET Core 3.1 MVC एप्लिकेशन पर काम कर रहा हूं। मुझे एक गतिशील चेकबॉक्स मेनू बनाने की आवश्यकता है, जो उपलब्ध फल दिखाता है और चयनित फलों को किसी अन्य डेटा स्रोत में संग्रहीत करता है।

मेरी समस्या यह है कि, मैं अपने दृश्य पर किसी भी चेकबॉक्स को चेक/क्लिक नहीं कर सकता और चयनित वस्तुओं को मेरे नियंत्रक को वापस भेज सकता हूं।

मेरा FruitsViewModel ऐसा दिखता है:

public class FruitsViewModel
{
    public IList<string> SelectedFruits { get; set; } = new List<string>();

    public IList<SelectListItem> AvailableFruits { get; set; } = new List<SelectListItem>();
}

मेरा फल नियंत्रक इस तरह दिखता है:

public class FruitsController : Controller
{
    [HttpGet]
    public async Task<IActionResult> Index()
    {
        var viewModel = new FruitsViewModel { 
                                                  AvailableFruits = GetAvailableFruits()
                                                };

        return View(viewModel);
    }

    [HttpPost]
    public async Task<IActionResult> Index(FruitsViewModel fruitsViewModel)
    {
        // ... process data
    }

    private IList<SelectListItem> GetAvailableFruits()
    {   
        // the values are originally retrieved from a DB, here I use just sample data   
        return new List<SelectListItem>
                       {
                           new SelectListItem {Text = "Apple", Value = "Apple"},
                           new SelectListItem {Text = "Pear", Value = "Pear"},
                           new SelectListItem {Text = "Banana", Value = "Banana"},
                           new SelectListItem {Text = "Orange", Value = "Orange"},
                       };
    }
}

मेरा FruitsController Index.cshtml दृश्य इस तरह दिखता है:

<form method="post">
    <div class="form-group row">
        <!-- Fruits -->
        <label class="col-4">Fruits</label>
        <div class="col-8">
            @foreach (SelectListItem availableFruit in Model.AvailableFruits)
            {
                <div class="custom-control custom-checkbox custom-control-inline">
                    <label class="custom-control-label">
                        <input type="checkbox"
                               class="custom-control-input"
                               name="SelectedFruits"
                               value="@availableFruit.Value"
                               @if (Model.SelectedFruits.Contains(availableFruit.Value))
                               {
                                   @:checked
                               }/>
                        @availableFruit.Text
                    </label>
                </div>
            }
        </div>
    </div>
    <div class="form-group row">
        <div class="offset-4 col-8">
            <button name="submit" type="submit" class="btn btn-info">Send</button>
        </div>
    </div>
</form>

क्या आप जानते हैं कि ASP.NET Core MVC दृश्य पर गतिशील रूप से लोड किए गए चेकबॉक्स की जांच कैसे करें और चयनित मान को तदनुसार नियंत्रक को वापस भेजें?

यदि संभव हो तो मैं jQuery का उपयोग नहीं करना चाहता।

मैंने पहले ही इसी तरह के post का अनुसरण किया है।

1
azzurro123 11 सितंबर 2020, 12:12

1 उत्तर

सबसे बढ़िया उत्तर

मैं अपने दृश्य पर किसी भी चेकबॉक्स को चेक/क्लिक नहीं कर सकता और चयनित वस्तुओं को मेरे नियंत्रक को वापस भेज सकता हूं।

आप गतिशील रूप से चेकबॉक्स जेनरेट करने के लिए नीचे दिए गए कोड को संशोधित करने का प्रयास कर सकते हैं (एस) बूटस्ट्रैप शैलियों के साथ

<div class="col-8">
    @foreach (SelectListItem availableFruit in Model.AvailableFruits)
    {
        <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" id="@availableFruit.Value"
                    class="custom-control-input"
                    name="SelectedFruits"
                    value="@availableFruit.Value"
                    @if (Model.SelectedFruits.Contains(availableFruit.Value)) { @: checked
                    } />
            <label class="custom-control-label" for="@availableFruit.Value">@availableFruit.Text</label>
        </div>
                
    }
</div>

परीक्षा परिणाम

चेक किए गए विकल्प

enter image description here

कार्य विधि में जाँचे गए मान प्राप्त करें

enter image description here

0
Fei Han 11 सितंबर 2020, 13:03