Generating one new field in table (ASP.NET MVC) - asp.net

Question

I have View where I create interview with greeting and details
Here is table
CREATE TABLE [dbo].[Interviews] (
[Interview_Id] INT IDENTITY (1, 1) NOT NULL,
[Greeting] NVARCHAR (MAX) NULL,
[Detail] NVARCHAR (MAX) NULL,
[VacancyId] INT NULL,
PRIMARY KEY CLUSTERED ([Interview_Id] ASC),
CONSTRAINT [FK_Interviews_ToTable] FOREIGN KEY ([VacancyId]) REFERENCES [dbo].[Vacancies] ([VacancyId]) ON DELETE CASCADE
);
Here is my controller for this View
// Страница ввода приветствия и описания вакансии
[HttpGet]
public ActionResult WelcomeScreen()
{
// Формируем список команд для передачи в представление
SelectList teams = new SelectList(db.Vacancy, "VacancyId", "VacancyName");
ViewBag.Teams = teams;
return View();
}
//Заносим инфу о вакансии в таблицу
[HttpPost]
public ActionResult WelcomeScreen(Interview interview)
{
db.Interview.Add(interview);
db.SaveChanges();
//Int32 id = interview.Interview_Id;
//TempData["id"] = id;
return RedirectToAction("Index", "Questions", new { id = interview.Interview_Id });
}
Here is my View
#using (Html.BeginForm())
{
<div class="outer-div">
<div class="inner-div">
<div class="right-welcome-div">
<div class="right-grid-in-grid">
<div class="col-md-10">
#Html.DropDownListFor(model => model.Vacancy.VacancyId, ViewBag.Teams as SelectList, new { #class = "greeting" })
#Html.ValidationMessageFor(model => model.VacancyId, "", new { #class = "text-danger" })
</div>
</div>
<div class="main-left-div">
<div style="margin-left: 40px">
#Html.EditorFor(model => model.Greeting, new {htmlAttributes = new {#class = "greeting", data_bind = "textInput: Greeting", placeholder = "Приветствие", id="Greeting"}})
</div>
#Html.TextAreaFor(model => model.Detail, new { #class = "greeting2", data_bind = "textInput: Detail" })
</div>
</div>
<div class="left-welcome-div">
<div class="text-div" style="padding-top: 30px; word-break: break-all;">
<p style="font-size: 20px; margin-top: 20px; padding-left: 30px; padding-right: 40px; text-align: center;"><b><span data-bind="text: Greeting"/></b>
</p>
<p style="font-size: 20px; margin-top: 40px; padding-left: 30px; padding-right: 40px; text-align: center;"><span data-bind="text: Detail"/>
</p>
</div>
<div class="button-div" style="padding-top: 40px;">
<input style="float: right; margin-right: 30px; margin-top: 20px; border-radius: 12px; width: 200px;" type="submit" value="Создать" class="btn btn-default" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ViewModel() {
this.Greeting = ko.observable('');
this.Detail = ko.observable('');
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
}
When I click submit button it creates new empty row in Vacancies table.
I don't understand, why??
Why so?

Answer 1

Because you generate dropDownList with name Vacancy.VacancyId according the following code an it will create a instance of Vacancy in property of Interview and When you add Interview in dbContext, EF will create new row for Vacancy because interview.Vacancy is not null.
#Html.DropDownListFor(model => model.Vacancy.VacancyId, ViewBag.Teams as SelectList, new { #class = "greeting" })
Replace the code with this
#Html.DropDownListFor(model => model.VacancyId, ViewBag.Teams as SelectList, new { #class = "greeting" })