Блог

Я хочу создать динамическую форму, и это то, что у меня есть:

Создать представление .cshtml

         <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <select id="SCat_Cat" name="SCat_Cat" asp-for="Cat_Id" asp-items="(SelectList)ViewBag.Cat_ID" class="form-control" onchange="funct()">
                <option value="0">Select Category</option>
            </select>
            <select id="SCat_SCat" name="SCat_SCat" asp-for="SCat_ID" asp-items="(SelectList)ViewBag.Scat_ID" class="form-control">
                <option value="0">Select Sub-Category</option>
            </select>
        </form>
  

Скрипт, который запускается после выбора категории:

 <script type="text/javascript">
    function funct() {
        var catvalue = document.getElementById("SCat_Cat").value;
        alert(catvalue);
        $.ajax(
            {
                type: "POST",
                url: '?CatID='   catvalue,
                success: function (result) {
                    if (result.success) {
                        alert("Good");
                    }
                },
                error: function (req, status, error) {
                    alert("Error");
                }
            });
        return false;   
    }
</script>
  

Контроллер:

         public async Task<IActionResult> Create(string CatID)
        {

            ViewBag.Cat_ID = new SelectList(_context.Category, "Cat_ID", "Cat_Name");
            if (CatID == null)
            {    
                ViewBag.SCat_ID = new SelectList("");
            }
            else
            {
                List<SubCategory> AllSubCategories = _context.SubCategory.ToList();
                List<SubCategory> SelectedSubCategories = AllSubCategories.FindAll(a => a.SCat_Cat.Contains(CatID));
                ViewBag.SCat_ID = new SelectList(SelectedSubCategories, "SCat_ID", "SCat_Name");
            }
            return View();
        }
  

Пока что это самая успешная вещь, которую я придумал, но она сбрасывает все, включая CSS, единственная правильная вещь, которую это делает, — это заполнить dropbox тем, что мне нужно.

РЕДАКТИРОВАТЬ: создайте статический класс с помощью метода расширения, подобного этому:

 public static class HttpRequestExtensions
{
    private const string RequestedWithHeader = "X-Requested-With";
    private const string XmlHttpRequest = "XMLHttpRequest";

    public static bool IsAjaxRequest(this HttpRequest request)
    {
        if (request == null)
        {
            throw new ArgumentNullException("request");
        }

        if (request.Headers != null)
        {
            return request.Headers[RequestedWithHeader] == XmlHttpRequest;
        }

        return false;
    }
}
  

Теперь измените свой метод контроллера следующим образом:

 public async Task<IActionResult> Create(string CatID)
    {

        ViewBag.Cat_ID = new SelectList(_context.Category, "Cat_ID", "Cat_Name");
        if (CatID == null)
        {    
            ViewBag.SCat_ID = new SelectList("");
        }
        else
        {
            List<SubCategory> AllSubCategories = _context.SubCategory.ToList();
            List<SubCategory> SelectedSubCategories = AllSubCategories.FindAll(a => a.SCat_Cat.Contains(CatID));
            ViewBag.SCat_ID = new SelectList(SelectedSubCategories, "SCat_ID", "SCat_Name");
        }
        return Request.IsAjaxRequest() ? (IActionResult)PartialView() : View();
    }
  

таким образом, вы можете вернуть PartialView только в том случае, если запрос является ajax-запросом, а ваш js выглядит следующим образом:

 <script type="text/javascript">
function funct() {
    var catvalue = document.getElementById("SCat_Cat").value;
    alert(catvalue);
    $.ajax(
        {
            type: "POST",
            url: '?CatID='   catvalue,
            success: function (result) {
                document.getElementById("myDiv").innerHTML = resu<
                alert("Good");
                
            },
            error: function (req, status, error) {
                alert("Error");
            }
        });
    return false;   
}
  

Например, вы можете вставить свою форму в div с идентификатором «myDiv».