我不知道如何使用 Kendo 组件在我的 View mvc 视图中添加下拉菜单、图像、复选框和单选按钮

Question

我正在开发 ASP.NET MVC 应用程序，我希望通过添加图像上传功能以将图像存储在数据库表中来增强用户体验。此外，我想合并从其他表格和复选框填充的下拉菜单，以供用户选择。如何在 ASP.NET MVC 中实现这一目标？我对设置模型、视图和控制器以有效处理图像上传、其他表的下拉菜单和复选框所需的步骤特别感兴趣。任何见解或代码示例将不胜感激

Answer 1

    @model tblCrud
    
    @{
        ViewData["Title"] = "Insert";
    }
    
    <h2>Add Data</h2>
    
    <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-v2.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
    
    <form asp-action="Add" method="post" enctype="multipart/form-data">
        <div class="container mt-5">
            <div class="form-group">
                <label for="c_name" class="form-label">Name:</label>
                <input name="c_name" id="c_name" asp-for="c_name" class="kendo-textbox" />
            </div>
    
            <div class="form-group">
                <label class="form-label">Gender:</label>
                <input type="radio" name="c_gender" id="c_male" value="Male" />
                <label for="c_male">Male</label>
                <input type="radio" name="c_gender" id="c_female" value="Female" />
                <label for="c_female">Female</label>
                <input type="radio" name="c_gender" id="c_other" value="Other" />
                <label for="c_other">Other</label>
            </div>
    
            <div class="form-group">
                <label class="form-label">Image</label>
                <input type="file" name="c_image" id="c_image" />
            </div>
    
            <div class="form-group">
                <label for="c_date" class="form-label">Date:</label>
                <input name="c_date" id="c_date" asp-for="c_date" class="kendo-datepicker" />
            </div>
    
            <div class="form-group">
                <label for="c_city" class="form-label">City:</label>
                <input name="c_city" id="c_city" asp-for="c_city" class="kendo-dropdownlist" />
            </div>
    <br>
    <br>
            <div class="form-group">
                <input type="checkbox" name="c_skill" value="Design" id="checkbox1" />
                <label for="checkbox1">Design</label>
                <input type="checkbox" name="c_skill" value="Develop" id="checkbox2" />
                <label for="checkbox2">Develop</label>
                <input type="checkbox" name="c_skill" value="Testing" id="checkbox3" />
                <label for="checkbox3">Testing</label>
            </div>
        </div>
        <input type="submit" value="Add" class="btn btn-primary">
    </form>
    
    <script>
        $(document).ready(function(){
    
            $("#c_name").kendoTextBox();
            $("input[name='c_gender']").kendoRadioButton();
            $("#c_image").kendoUpload();
            $("#c_date").kendoDatePicker();
            $("#c_city").kendoDropDownList({
                autoBind:false,
                optionLabel:"Select City",
                dataTextField:"c_cname",
                dataValueField:"c_id",
                dataSource:{
                    type:"json",
                    transport:{
                        read:"/Crud/GetAllCities"
                    }
                }
            });
        });
    </script>


@model tblCrud

@{
    ViewData["Title"] = "Edit";
}

<h2>Edit Data</h2>

<link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-v2.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>

<form asp-action="Edit" method="post" enctype="multipart/form-data">

    <div >
        <input type="hidden" asp-for="@Model.c_id">
    </div>
    <div class="container mt-5">
        <div class="form-group">
            <label for="c_name" class="form-label">Name:</label>
            <input name="c_name" id="c_name" asp-for="c_name" class="kendo-textbox" />
        </div>

        <div class="form-group">
            <label class="form-label">Gender:</label>
            <input type="radio" name="c_gender" id="c_male" value="Male" @(Model.c_gender == "Male" ? "checked" : "") />
            <label for="c_male">Male</label>
            <input type="radio" name="c_gender" id="c_female" value="Female" @(Model.c_gender == "Female" ? "checked" : "") />
            <label for="c_female">Female</label>
            <input type="radio" name="c_gender" id="c_other" value="Other" @(Model.c_gender == "Other" ? "checked" : "") />
            <label for="c_other">Other</label>
        </div>

        <div class="form-group">
            <label for="c_image" class="form-label">Image:</label>
            <input type="file" name="c_image" id="c_image" class="kendo-upload" />
            <img src="@Model.c_image" style="height: 150px; width:150px" />
        </div>

        <div class="form-group">
            <label for="c_date" class="form-label">Date:</label>
            <input name="c_date" id="c_date" asp-for="c_date" class="kendo-datepicker" />
        </div>

        <div class="form-group">
            <label for="c_city" class="form-label">City:</label>
            <input name="c_city" id="c_city" asp-for="c_city" class="kendo-dropdownlist" />
        </div>


        <div class="form-group">
            <input type="checkbox" name="c_skill" value="Design" @(Model.c_skill.Contains("Design")? "checked":"") />
            <label for="checkbox1">Design</label>
            <input type="checkbox" name="c_skill"  value="Develop" @(Model.c_skill.Contains("Develop")? "checked":"") />
            <label for="checkbox2">Develop</label>
            <input type="checkbox" name="c_skill" value="Testing" @(Model.c_skill.Contains("Testing")? "checked":"") />
            <label for="checkbox3">Testing</label>
        </div>
    </div>
    <input type="submit" value ="Edit" class="btn btn-primary">
</form>

<script>
    $(document).ready(function(){
        $("#c_name").kendoTextBox();
        $("input[name='c_gender']").kendoRadioButton();
        $("#c_image").kendoUpload();
        $("#c_date").kendoDatePicker();
        $("#c_city").kendoDropDownList({
            autoBind:false,
            optionLabel:"Select City",
            dataTextField:"c_cname",
            dataValueField:"c_id",
            dataSource:{
                type:"json",
                transport:{
                    read:"/Crud/GetAllCities"
                }
            }
        });
    });
</script>