form being posted for no reason

Question

User61219273 posted

I'm trying to dynamically at a Partial to my page on the click of a JavaScript button.

<div class="form-group">
<button class="control-label col-md-2" id="btnAddField" >Add Question with One Answer</button>

<div class="col-md-10">

@using (Html.BeginForm())
{

<div id="fields"></div>

}

<div style="color:blue"><b>Data:</b> @ViewBag.Data</div>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
var $fields = $('#fieldsTop');
$('#btnAddField').click(function (e) {
e.preventDefault();

$('@Html.Partial("_SingleQuestion")').appendTo($fields);
});
});

</script>
</div>
</div>

It might be clear to you that I want to add a <div class="form-group"> to my div class="form-horizontal" 

I've succeeded if I put something like this in the _partial;

<div>test</div>

However, If I put the full contents to what I want, the form submits - I've accredited to being something wrong with the <div class="form-group"> because if I add that div to the top of the _Partial the page posts... How do I keep it from posting? The _Partial is to have the same code as the blob above btw..

Answer 1

User1724605321 posted

Hi bubbely ,

I would suggest you load the partial view using Jquery :

    <script type="text/javascript">

        $(function () {
            var $fields = $('#fields');

            $.get("/Controller/LoadPartial", function (htmlResponse) {

                $fields.append(htmlResponse);

            });

           

        })
    </script>

Controller :

        public ActionResult LoadPartial()
        {

            return PartialView("_SingleQuestion");
        }

because if I add that div to the top of the _Partial the page posts.

Could you please provide more details ? What do you mean by "page posts" since there is no post behavior in your pages according to your codes .

Best Regards,

Nan Yu