3

I'm developing an application with asp.net mvc. I am not doing a screen for preparing questions for surveys and answers to these questions. On the home screen is a table of questions. When I press 'add new question' button, I open a popup with jquery and add the question and answer options in this question ('popup is independent of the main screen, ie Layout = null'). Then, when the 'submit' button of this popup is pressed, I validate the form in the popup with javascrit in addOrEdit.cshtml. If the validation is successful, my goal is to submit the form submit event of asp.net mvc to the javascript function on the main page. I can't do this. Where am I making a mistake. What is the problem. I tried to explain it in an explanatory way. I also added screenshots and codes.

Index.cshtml 

@{
  ViewBag.Title = "Soru Listesi";
}

   <h2>Add Question</h2>
   <a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('@Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Add New Question</a>  

//table heree

Index.cshtml sectionscript

@section Scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

<script>
   //datatable script hereee.....

function PopupForm(url) {
    var formDiv = $('<div/>');
     $.get(url)
       .done(function (response) {
         formDiv.html(response);
          Popup = formDiv.dialog({
             autoOpen: true,
             resizable: true,
              title: 'Soru Detay',
              modal: true,
              height: 'auto',
              width: '700',
              close: function () {
                 Popup.dialog('destroy').remove();
             }
       });
   });
}


function SubmitForm(form) {
   alert('gel babanaaa');
    if ($(form).valid()) {
    alert('validd');
       $.ajax({
            type: "POST",
            url: form.action,
            data: $(form).serialize(),
            success: function (data) {
                if (data.success) {
                  Popup.dialog('close');
                  dataTable.ajax.reload();
                  $.notify(data.message,
                     {
                       globalPosition: "top center",
                       className: "success",
                       showAnimation: "slideDown",
                       showDuration: 500,
                       gap: 1000
                     });
                  }
               }
          });
     }
 }
  </script>
}

AddOrEdit.cshtml

@model MerinosSurvey.Models.Questions
@{
    Layout = null;
}
@using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { @class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
 {
// other component heree   

<div class="form-group row">
    <input type="button" value="Submit" class="btn btn-primary" id="btnSubmit" />
    <input type="reset" value="Reset" class="btn btn-secondary" />
</div>

}

AddOrEdit.cshtml scripts

<script>
 //some scriptt for validationn...

$("#btnSubmit").click(function (event) {
    var form = $("#questionForm");
    if (form[0].checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
    }
    form.addClass('was-validated');
    // Perform ajax submit here...
    if ($(form).valid()) {       
        form[0].submitEvent();//MY PROBLEM!!!!!
    }
});

</script>

I want to call SubmitForm event in asp.net mvc after button click and validation. And I used form[0].submitEvent(); SO I can't send a request via AJAX. but I doesn't work.

img1 img2 img3

Improve this question

1 Answer 1

Reset to default
2

replaces your Index.cshtml with the code below

   @{
        ViewBag.Title = "Soru Listesi";
    }

    <h2>Add Question</h2>
    <a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('@Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Add New Question</a>
    <table id="questionTable" class="table table-striped table-bordered accent-blue" style="width: 100%">
        <thead>
            <tr>
                <th>Soru No</th>
                <th>Soru Adı</th>
                <th>Oluşturma Tarihi</th>
                <th>Güncelleme Tarihi</th>
                <th>Detay/Güncelle/Sil</th>
            </tr>
        </thead>
    </table>

    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />



    @section Scripts{

        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

        <script>
            var Popup, dataTable;
            $(document).ready(function () {
                dataTable = $("#questionTable").DataTable({
                    "ajax": {
                        "url": "/Question/GetData",
                        "type": "GET",
                        "datatype": "json"
                    },
                    "columnDefs": [
                        { width: '10%', targets: 5 }
                    ],
                    "scrollX": true,
                    "scrollY": "auto",
                    "columns": [
                        { "data": "QuestionId" },
                        { "data": "QuestionName" },
                        {
                            "data": "CreatedDate",
                            "render": function (data) { return getDateString(data); }
                        },
                        {
                            "data": "UpdatedDate",
                            "render": function (data) { return getDateString(data); }
                        },
                        {
                            "data": "QuestionId",
                            "render": function (data) {
                                return "<a class='btn btn-primary btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit", "Question")/" +
                                    data +
                                    "')><i class='fa fa-pencil'></i> Güncelle</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" +
                                    data +
                                    ")><i class='fa fa-trash'></i> Sil</a>";
                            },
                            "orderable": false,
                            "searchable": false,
                            "width": "150px"
                        }
                    ],
                    "language": {
                        "emptyTable":
                            "Soru bulunamadı, lütfen <b>Yeni Soru Oluştur</b> butonuna tıklayarak yeni anket oluşturunuz. "
                    }
                });
            });


            function getDateString(date) {
                var dateObj = new Date(parseInt(date.substr(6)));
                let year = dateObj.getFullYear();
                let month = (1 + dateObj.getMonth()).toString().padStart(2, '0');
                let day = dateObj.getDate().toString().padStart(2, '0');
                return day + '/' + month + '/' + year;
            };


            function PopupForm(url) {
                var formDiv = $('<div/>');
                $.get(url)
                    .done(function (response) {
                        formDiv.html(response);
                        Popup = formDiv.dialog({
                            autoOpen: true,
                            resizable: true,
                            title: 'Soru Detay',
                            modal: true,
                            height: 'auto',
                            width: '700',
                            close: function () {
                                Popup.dialog('destroy').remove();
                            }

                        });
                    });
            }

            function SubmitForm(form) {
                alert('Submit Formm');
                if (form[0].checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.addClass('was-validated');

                if ($(form).valid()) {
                    alert('ben burdyaım');
                }
            }


            function ResetForm(form) {
                Popup.dialog('close');
                return false;
            }

            function Delete(id) {
                if (confirm('Bu soruyu silmek istediğinizden emin misiniz?')) {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("Delete", "Question")/' + id,
                        success: function (data) {
                            if (data.success) {
                                dataTable.ajax.reload();
                                $.notify(data.message,
                                    {
                                        className: "success",
                                        globalPosition: "top center",
                                        title: "BAŞARILI"
                                    })
                            }
                        }

                    });
                }
            }


        </script>
    }

replaces your AddOrEdit.cshtml with the code below

@model MerinosSurvey.Models.Questions
@{
  Layout = null;
}

@using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { @class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
    {
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group row">
            @Html.LabelFor(model => model.QuestionId, new { @class = "col-form-label col-md-3" })
            <div class="col-md-9">
                @Html.TextBoxFor(model => model.QuestionId, new { @readonly = "readonly", @class = "form-control" })

            </div>
        </div>
        <div class="form-group row">
            @Html.LabelFor(model => model.QuestionName, new { @class = "col-form-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.QuestionName, new { htmlAttributes = new { @class = "form-control", required = "true" } })
                <div class="valid-feedback"><i class="fa fa-check">Süpersin</i></div>
                <div class="invalid-feedback "><i class="fa fa-times"></i></div>
            </div>
        </div>
        <div class="form-group row">
                @Html.LabelFor(model => model.CreatedDate, new { @class = "form-control-label col-md-3"})
                <div class="col-md-9">
                    @Html.EditorFor(model => model.CreatedDate, "{0:yyyy-MM-dd}", new { htmlAttributes = new { @class = "form-control", type = "date", @readonly = "readonly",required="false" } })

                </div>
            </div>

        <div class="form-group row ">
            <label class="col-sm-3 col-form-label">Options</label>
            <div class="col-sm-9 input-group">
                <input type="text" class="form-control" name="option[]" required placeholder="Seçenek giriniz" />
                <div class="input-group-append">
                    <button type="button" class="btn btn-success addButton"><i class="fa fa-plus"></i></button>
                </div>
            </div>
        </div>

        <!-- The option field template containing an option field and a Remove button -->
        <div class="form-group d-none row" id="optionTemplate">
            <div class="offset-sm-3 col-sm-9 input-group">
                <input class="form-control" type="text" name="option[]" required placeholder="Diğer seçenek giriniz." />
                <div class="input-group-append">
                    <button type="button" class="btn btn-danger removeButton"><i class="fa fa-times"></i></button>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <input type="button" value="Submit" class="btn btn-primary" id="btnSubmit" />
            <input type="reset" value="Reset" class="btn btn-secondary" />
        </div>
    }
    <script>
        $(document).ready(function () {
            // The maximum number of options
            var MAX_OPTIONS = 5;
            $('#questionForm').on('click', '.addButton', function () {
                var $template = $('#optionTemplate'),
                    $clone = $template
                        .clone()
                        .removeClass('d-none')
                        .removeAttr('id')
                        .insertBefore($template),
                    $option = $clone.find('[name="option[]"]');

                // Add new field
                $('#questionForm').bootstrapValidator('addField', $option);
            })

                // Remove button click handler
                .on('click', '.removeButton', function () {
                    var $row = $(this).parents('.form-group'),
                        $option = $row.find('[name="option[]"]');

                    // Remove element containing the option
                    $row.remove();

                    // Remove field
                    $('#questionForm').bootstrapValidator('removeField', $option);
                })

                // Called after adding new field
                .on('added.field.bv', function (e, data) {
                    // data.field   --> The field name
                    // data.element --> The new field element
                    // data.options --> The new field options

                    if (data.field === 'option[]') {
                        if ($('#questionForm').find(':visible[name="option[]"]').length >= MAX_OPTIONS) {
                            $('#questionForm').find('.addButton').attr('disabled', 'disabled');
                        }
                    }
                })

                // Called after removing the field
                .on('removed.field.bv', function (e, data) {
                    if (data.field === 'option[]') {
                        if ($('#questionForm').find(':visible[name="option[]"]').length < MAX_OPTIONS) {
                            $('#questionForm').find('.addButton').removeAttr('disabled');
                        }
                    }
                });
        });



        $("#btnSubmit").click(function (event) {
            var form = $("#questionForm");
            if (form[0].checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }

            form.addClass('was-validated');

            SubmitForm(form);

        });

    </script>
Improve this answer
Sign up to request clarification or add additional context in comments.

21 Comments

buton click function is in AddOrEdit.cshtml.AddOrEdit.cshtml is a popup.My goal is to submit popup in main Layout(Index.cshtml) and use ajax call and reload datatable in there(Index.cshtml)
I understand, your question try above the script will work, if any problem occurs sends the error occurred
When clicking on submit would you like to make a correct ajax request? do you want an example too?
Is there 2 scripts I should use here? Where should I use?
Markos did you prepare a small project. I am very worried I can solve the problem. In the meantime, I'm dynamically creating options for popup questions. I'm holding a table in sql server for these options. Naturally there should be update and delete options for these option fields. For this need I should specify a model for questions just like the AddOrEdit page. Suggest what you need for this. I need to keep both id and text of these options.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.